113 lines
3.7 KiB
TypeScript
113 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { CheckIcon, GlobeIcon } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "sonner";
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
ADMIN_API_LOCALES,
|
|
ADMIN_LOCALE_LABELS,
|
|
applyAdminUiLocale,
|
|
getAdminRequestLocale,
|
|
type AdminApiLocale,
|
|
} from "@/lib/admin-locale";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const LOCALE_FLAGS: Record<AdminApiLocale, string> = {
|
|
zh: "🇨🇳",
|
|
en: "🇺🇸",
|
|
ne: "🇳🇵",
|
|
};
|
|
|
|
export function AdminLanguageSwitcher() {
|
|
const { i18n, t } = useTranslation("common");
|
|
const [locale, setLocale] = useState<AdminApiLocale>(() =>
|
|
typeof document !== "undefined" ? getAdminRequestLocale() : "en",
|
|
);
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
setLocale(getAdminRequestLocale());
|
|
});
|
|
}, []);
|
|
|
|
async function onSelectLocale(next: AdminApiLocale) {
|
|
applyAdminUiLocale(next);
|
|
await i18n.changeLanguage(next);
|
|
setLocale(next);
|
|
toast.success(
|
|
t("language.changed", {
|
|
language: ADMIN_LOCALE_LABELS[next],
|
|
}),
|
|
);
|
|
}
|
|
|
|
const currentFlag = LOCALE_FLAGS[locale];
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="inline-flex h-8 items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2 text-left text-slate-700 shadow-[0_1px_2px_rgba(15,23,42,0.04)] outline-none transition hover:border-slate-300 hover:bg-slate-50 focus-visible:ring-2 focus-visible:ring-ring">
|
|
<span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs">
|
|
{currentFlag}
|
|
</span>
|
|
<GlobeIcon
|
|
className="size-4 shrink-0 stroke-[1.75] text-slate-400 sm:hidden"
|
|
aria-hidden
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-[188px] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 shadow-[0_16px_40px_rgba(15,23,42,0.12)]"
|
|
>
|
|
<DropdownMenuGroup className="space-y-0.5">
|
|
<DropdownMenuLabel className="sr-only">
|
|
{t("language.title")}
|
|
</DropdownMenuLabel>
|
|
{ADMIN_API_LOCALES.map((code) => {
|
|
const active = locale === code;
|
|
|
|
return (
|
|
<DropdownMenuItem
|
|
key={code}
|
|
className={cn(
|
|
"flex min-h-[42px] items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-slate-700 outline-none transition",
|
|
active
|
|
? "border-rose-100 bg-rose-50 text-rose-600"
|
|
: "hover:bg-slate-50 focus:bg-slate-50",
|
|
)}
|
|
onClick={() => void onSelectLocale(code)}
|
|
>
|
|
<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-white text-lg shadow-[inset_0_0_0_1px_rgba(148,163,184,0.16)]">
|
|
{LOCALE_FLAGS[code]}
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span
|
|
className={cn(
|
|
"block truncate text-[14px] font-semibold leading-5",
|
|
active ? "text-rose-600" : "text-slate-800",
|
|
)}
|
|
>
|
|
{ADMIN_LOCALE_LABELS[code]}
|
|
</span>
|
|
</span>
|
|
<span className="flex w-3 shrink-0 justify-end">
|
|
{active ? <CheckIcon className="size-3.5 text-rose-500" /> : null}
|
|
</span>
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|