2569718930@qq.com
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTransition } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
LANDING_LOCALE_COOKIE,
|
|
nextLandingLocale,
|
|
type LandingLocale,
|
|
} from "@/components/landing/landingLocale";
|
|
|
|
const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
|
|
|
|
export function LandingLocaleToggle({ locale }: { locale: LandingLocale }) {
|
|
const router = useRouter();
|
|
const [isPending, startTransition] = useTransition();
|
|
const isEn = locale === "en-US";
|
|
|
|
const toggleLocale = () => {
|
|
const nextLocale = nextLandingLocale(locale);
|
|
document.cookie = `${LANDING_LOCALE_COOKIE}=${nextLocale}; Max-Age=${ONE_YEAR_SECONDS}; Path=/; SameSite=Lax`;
|
|
document.documentElement.lang = nextLocale;
|
|
try {
|
|
window.localStorage.setItem(LANDING_LOCALE_COOKIE, nextLocale);
|
|
} catch {
|
|
// Locale persistence is best-effort; the cookie is enough for SSR.
|
|
}
|
|
startTransition(() => {
|
|
router.refresh();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggleLocale}
|
|
disabled={isPending}
|
|
className="inline-flex h-9 cursor-pointer items-center gap-1 rounded-md border border-slate-200 bg-white px-1 text-xs font-semibold text-slate-500 shadow-sm hover:border-slate-300 disabled:cursor-wait disabled:opacity-70"
|
|
aria-label={isEn ? "Switch language" : "切换语言"}
|
|
>
|
|
<span className={`rounded px-2 py-1 ${!isEn ? "bg-slate-900 text-white" : ""}`}>
|
|
中
|
|
</span>
|
|
<span className={`rounded px-2 py-1 ${isEn ? "bg-slate-900 text-white" : ""}`}>
|
|
EN
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|