Language Switcher

Control for changing the interface language.

html

<div class="lsw lsw--en" lang="en" dir="auto">
  <span class="lsw__chip" style="background:#F5C2E0;">en</span>
  <p class="lsw__greet lsw__greet--en">Welcome back, Sam</p>
  <p class="lsw__greet lsw__greet--es">Bienvenido de nuevo, Sam</p>
  <p class="lsw__greet lsw__greet--ar">&#1571;&#1607;&#1604;&#1611;&#1575; &#1576;&#1603; &#1605;&#1580;&#1583;&#1583;&#1611;&#1575;&#1548; Sam</p>
</div>
<style>
.lsw { font: 15px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.lsw__chip { display: inline-block; font: 700 10px ui-monospace, monospace; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; }
.lsw__greet { display: none; margin: 0; font-weight: 600; }
.lsw--en .lsw__greet--en, .lsw--es .lsw__greet--es, .lsw--ar .lsw__greet--ar { display: block; }
</style>

tailwind

<div class="lswtw lswtw--en font-sans text-[15px] leading-7 text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border" lang="en" dir="auto">
  <span class="inline-block font-bold text-[10px] font-mono uppercase py-1 px-2.5 rounded-full mb-3" style="background:#F5C2E0;">en</span>
  <p class="lswtw__greet lswtw__greet--en hidden m-0 font-semibold">Welcome back, Sam</p>
  <p class="lswtw__greet lswtw__greet--es hidden m-0 font-semibold">Bienvenido de nuevo, Sam</p>
  <p class="lswtw__greet lswtw__greet--ar hidden m-0 font-semibold">&#1571;&#1607;&#1604;&#1611;&#1575; &#1576;&#1603; &#1605;&#1580;&#1583;&#1583;&#1611;&#1575;&#1548; Sam</p>
</div>
<style>
.lswtw--en .lswtw__greet--en, .lswtw--es .lswtw__greet--es, .lswtw--ar .lswtw__greet--ar { display: block; }
</style>

react

export function LanguageSwitcher({
  language = "en",
  showFlag = true,
  accent = "#F5C2E0",
  userName = "Sam",
}) {
  const greetings = {
    en: `Welcome back, ${userName}`,
    es: `Bienvenido de nuevo, ${userName}`,
    ar: `\u0623\u0647\u0644\u0627\u064B \u0628\u0643 \u0645\u062C\u062F\u062F\u0627\u064B\u060C ${userName}`,
  };
  return (
    <div lang={language} dir="auto" style={{ font: "15px/1.6 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      {showFlag && <span style={{ display: "inline-block", fontWeight: 700, fontSize: 10, textTransform: "uppercase", padding: "3px 9px", borderRadius: 999, marginBottom: 12, background: accent }}>{language}</span>}
      <p style={{ margin: 0, fontWeight: 600 }}>{greetings[language]}</p>
    </div>
  );
}