Files
rustfs-console/components/language-switcher.tsx
T
2026-07-05 18:09:13 +08:00

57 lines
2.0 KiB
TypeScript

"use client"
import { useTranslation } from "react-i18next"
import { RiTranslate2 } from "@remixicon/react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { changeLocale, LOCALE_CODES, type Locale } from "@/lib/i18n"
const languageConfig: Record<string, { text: string; icon: typeof RiTranslate2 }> = {
en: { text: "English", icon: RiTranslate2 },
ar: { text: "العربية", icon: RiTranslate2 },
zh: { text: "中文", icon: RiTranslate2 },
fr: { text: "Français", icon: RiTranslate2 },
tr: { text: "Türkçe", icon: RiTranslate2 },
ja: { text: "日本語", icon: RiTranslate2 },
ko: { text: "한국어", icon: RiTranslate2 },
de: { text: "Deutsch", icon: RiTranslate2 },
es: { text: "Español", icon: RiTranslate2 },
pt: { text: "Português", icon: RiTranslate2 },
it: { text: "Italiano", icon: RiTranslate2 },
ru: { text: "Русский", icon: RiTranslate2 },
id: { text: "Bahasa Indonesia", icon: RiTranslate2 },
vi: { text: "Tiếng Việt", icon: RiTranslate2 },
}
const options = LOCALE_CODES.map((key) => ({
label: languageConfig[key]?.text ?? key,
key,
}))
export function LanguageSwitcher() {
const { i18n, t } = useTranslation()
const currentLocale = (i18n.language?.split("-")[0] ?? "en") as Locale
const currentLanguage = languageConfig[currentLocale] ?? languageConfig.en
const CurrentIcon = currentLanguage.icon
return (
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button variant="ghost" size="icon" aria-label={t("Language")}>
<CurrentIcon className="size-4 shrink-0" aria-hidden />
</Button>
}
/>
<DropdownMenuContent className="w-40" align="start">
{options.map(({ label, key }) => (
<DropdownMenuItem key={key} onClick={() => void changeLocale(key)}>
{label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)
}