46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from "@heroui/react";
|
||
|
|
|
||
|
|
export default function LanguageSwitch() {
|
||
|
|
const { language, setLanguage } = useApp();
|
||
|
|
|
||
|
|
const languages = [
|
||
|
|
{ key: "zh", label: "中文" },
|
||
|
|
{ key: "en", label: "English" },
|
||
|
|
];
|
||
|
|
|
||
|
|
const handleSelectionChange = (key: React.Key) => {
|
||
|
|
setLanguage(key as "zh" | "en");
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dropdown>
|
||
|
|
<DropdownTrigger>
|
||
|
|
<Button
|
||
|
|
variant="bordered"
|
||
|
|
className="bg-bg-surface dark:bg-gray-800 border-border-normal dark:border-gray-700 min-w-10 h-10 px-3 rounded-lg"
|
||
|
|
>
|
||
|
|
<span className="text-sm font-medium text-text-primary dark:text-white">
|
||
|
|
{language === "zh" ? "中" : "EN"}
|
||
|
|
</span>
|
||
|
|
</Button>
|
||
|
|
</DropdownTrigger>
|
||
|
|
<DropdownMenu
|
||
|
|
aria-label="Language selection"
|
||
|
|
selectedKeys={new Set([language])}
|
||
|
|
selectionMode="single"
|
||
|
|
onSelectionChange={(keys) => {
|
||
|
|
const key = Array.from(keys)[0];
|
||
|
|
if (key) handleSelectionChange(key);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{languages.map((lang) => (
|
||
|
|
<DropdownItem key={lang.key}>{lang.label}</DropdownItem>
|
||
|
|
))}
|
||
|
|
</DropdownMenu>
|
||
|
|
</Dropdown>
|
||
|
|
);
|
||
|
|
}
|