mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-25 00:51:20 +00:00
00ba8b25a9
The language switcher displayed the *other* language's flag (clicking
the Chinese flag switched to Chinese). This is dissonant — a flag reads
as a state indicator first, so seeing the Chinese flag while the UI is
in English feels wrong. Users expect the flag to reflect the current
language, like every other status indicator.
Flips the flag and label ternaries so English shows UK + EN, Chinese
shows CN + 中文. Tooltip text ("Switch to Chinese" / "切换到英文") still
communicates the click action, which is where that belongs.
27 lines
1 KiB
TypeScript
27 lines
1 KiB
TypeScript
import { useI18n } from "@/i18n/context";
|
|
|
|
/**
|
|
* Compact language toggle — shows a clickable flag that switches between
|
|
* English and Chinese. Persists choice to localStorage.
|
|
*/
|
|
export function LanguageSwitcher() {
|
|
const { locale, setLocale, t } = useI18n();
|
|
|
|
const toggle = () => setLocale(locale === "en" ? "zh" : "en");
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
className="group relative inline-flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
title={t.language.switchTo}
|
|
aria-label={t.language.switchTo}
|
|
>
|
|
{/* Show the *current* language's flag — tooltip advertises the click action */}
|
|
<span className="text-base leading-none">{locale === "en" ? "🇬🇧" : "🇨🇳"}</span>
|
|
<span className="hidden sm:inline font-display tracking-wide uppercase text-[0.65rem]">
|
|
{locale === "en" ? "EN" : "中文"}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|