83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { usePathname, useRouter } from "@/i18n/navigation";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { Globe } from "lucide-react";
|
|
import { routing } from "@/i18n/routing";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* 语言切换器。
|
|
*
|
|
* 使用 next-intl 的 usePathname / useRouter，切换语言时保留当前路径，
|
|
* 而不是跳回首页。通过 useParams 需要传参的场景在这里不适用，
|
|
* 因为本项目的动态段只有 slug，路径本身已经能表达。
|
|
*/
|
|
export function LocaleSwitcher({ className }: { className?: string }) {
|
|
const t = useTranslations("LocaleSwitcher");
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const handleSelect = (nextLocale: string) => {
|
|
setOpen(false);
|
|
router.replace(pathname, { locale: nextLocale });
|
|
};
|
|
|
|
return (
|
|
<div className={cn("relative", className)}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((value) => !value)}
|
|
aria-haspopup="listbox"
|
|
aria-expanded={open}
|
|
aria-label={t("label")}
|
|
className="inline-flex h-9 items-center gap-[6px] rounded-full px-sm text-body-sm text-steel transition-colors duration-150 active:bg-surface"
|
|
>
|
|
<Globe className="size-4" aria-hidden="true" />
|
|
<span className="hidden sm:inline">{t(locale)}</span>
|
|
</button>
|
|
|
|
{open ? (
|
|
<>
|
|
{/* 点击遮罩关闭菜单 */}
|
|
<button
|
|
type="button"
|
|
tabIndex={-1}
|
|
aria-hidden="true"
|
|
onClick={() => setOpen(false)}
|
|
className="fixed inset-0 z-40 cursor-default"
|
|
/>
|
|
|
|
<ul
|
|
role="listbox"
|
|
aria-label={t("label")}
|
|
className="absolute right-0 z-50 mt-xs min-w-[140px] overflow-hidden rounded-md border border-hairline bg-canvas py-xxs shadow-card"
|
|
>
|
|
{routing.locales.map((item) => (
|
|
<li key={item}>
|
|
<button
|
|
type="button"
|
|
role="option"
|
|
aria-selected={item === locale}
|
|
onClick={() => handleSelect(item)}
|
|
className={cn(
|
|
"flex w-full items-center px-md py-xs text-left text-body-sm transition-colors duration-150",
|
|
item === locale
|
|
? "bg-surface font-medium text-ink"
|
|
: "text-steel active:bg-surface",
|
|
)}
|
|
>
|
|
{t(item)}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|