ToyShare/src/components/layout/LanguageSwitcher.tsx

47 lines
1.4 KiB
TypeScript

'use client';
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useChangeLocale, useCurrentLocale, useI18n } from "@/locales/client";
import { Languages } from "lucide-react";
export default function LanguageSwitcher() {
const changeLocale = useChangeLocale();
const currentLocale = useCurrentLocale();
const t = useI18n();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-9 w-9 md:h-10 md:w-10">
<Languages className="h-5 w-5" />
<span className="sr-only">{t('lang.select_language')}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>{t('lang.select_language')}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => changeLocale('en')}
disabled={currentLocale === 'en'}
>
{t('lang.english')}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => changeLocale('zh-TW')}
disabled={currentLocale === 'zh-TW'}
>
{t('lang.traditional_chinese')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}