65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
interface LanguageSettingsProps {
|
||
|
|
value: "zh" | "en";
|
||
|
|
onChange: (value: "zh" | "en") => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function LanguageSettings({ value, onChange }: LanguageSettingsProps) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="space-y-2">
|
||
|
|
<header className="space-y-1">
|
||
|
|
<h3 className="text-sm font-medium">{t("settings.language")}</h3>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
{t("settings.languageHint", {
|
||
|
|
defaultValue: "切换后立即预览界面语言，保存后永久生效。",
|
||
|
|
})}
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
<div className="inline-flex gap-1 rounded-md border border-border bg-background p-1">
|
||
|
|
<LanguageButton
|
||
|
|
active={value === "zh"}
|
||
|
|
onClick={() => onChange("zh")}
|
||
|
|
>
|
||
|
|
{t("settings.languageOptionChinese")}
|
||
|
|
</LanguageButton>
|
||
|
|
<LanguageButton
|
||
|
|
active={value === "en"}
|
||
|
|
onClick={() => onChange("en")}
|
||
|
|
>
|
||
|
|
{t("settings.languageOptionEnglish")}
|
||
|
|
</LanguageButton>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
interface LanguageButtonProps {
|
||
|
|
active: boolean;
|
||
|
|
onClick: () => void;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
function LanguageButton({ active, onClick, children }: LanguageButtonProps) {
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
onClick={onClick}
|
||
|
|
size="sm"
|
||
|
|
variant={active ? "default" : "ghost"}
|
||
|
|
className={cn(
|
||
|
|
"min-w-[96px]",
|
||
|
|
active
|
||
|
|
? "shadow-sm"
|
||
|
|
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
}
|