Skip to content
Closed
13 changes: 8 additions & 5 deletions web/src/components/LanguageSwitcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@ import { useI18n } from "@/i18n/context";

/**
* Compact language toggle — shows a clickable flag that switches between
* English and Chinese. Persists choice to localStorage.
* English, Simplified Chinese, and Traditional Chinese. Persists choice to localStorage.
*/
export function LanguageSwitcher() {
const { locale, setLocale, t } = useI18n();

const toggle = () => setLocale(locale === "en" ? "zh" : "en");
const toggle = () => {
if (locale === "en") setLocale("zh");
else if (locale === "zh") setLocale("tw");
else setLocale("en");
};

return (
<Button
Expand All @@ -21,14 +25,13 @@ export function LanguageSwitcher() {
>
<span className="inline-flex items-center gap-1.5">
<span className="text-base leading-none">
{locale === "en" ? "🇬🇧" : "🇨🇳"}
{locale === "en" ? "🇬🇧" : locale === "zh" ? "🇨🇳" : "🇹🇼"}
</span>

<Typography
mondwest
className="hidden sm:inline tracking-wide uppercase text-[0.65rem]"
>
{locale === "en" ? "EN" : "中文"}
{locale === "en" ? "EN" : locale === "zh" ? "简体" : "繁體"}
</Typography>
</span>
</Button>
Expand Down
5 changes: 3 additions & 2 deletions web/src/i18n/context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import { createContext, useContext, useState, useCallback, type ReactNode } from
import type { Locale, Translations } from "./types";
import { en } from "./en";
import { zh } from "./zh";
import { tw } from "./tw";

const TRANSLATIONS: Record<Locale, Translations> = { en, zh };
const TRANSLATIONS: Record<Locale, Translations> = { en, zh, tw };
const STORAGE_KEY = "hermes-locale";

function getInitialLocale(): Locale {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored === "en" || stored === "zh") return stored;
if (stored === "en" || stored === "zh" || stored === "tw") return stored;
} catch {
// SSR or privacy mode
}
Expand Down
2 changes: 1 addition & 1 deletion web/src/i18n/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,7 @@ export const en: Translations = {
},

language: {
switchTo: "Switch to Chinese",
switchTo: "Switch language",
},

theme: {
Expand Down
Loading