xLog/src/components/common/LanguageSwitch.tsx

48 lines
1.0 KiB
TypeScript

"use client"
import { useLocale } from "next-intl"
import { locales } from "~/i18n"
import { Menu } from "../ui/Menu"
export function LanguageSwitch() {
const locale = useLocale()
const nameMap: Record<string, string> = {
en: "English",
zh: "简体中文",
"zh-TW": "繁體中文",
ja: "日本語",
}
return (
<Menu
placement="top"
target={
<button className="inline-block i-mingcute-translate-2-line text-2xl"></button>
}
dropdown={
<>
{locales.map((lo, i) => (
<Menu.Item
key={i}
type="button"
onClick={() => {
document.cookie = `NEXT_LOCALE=${lo};`
window.location.reload()
}}
className="mx-auto"
>
<span>{nameMap[lo]}</span>
{locale === lo && (
<span className="ml-2 i-mingcute-check-line"></span>
)}
</Menu.Item>
))}
</>
}
/>
)
}