feat: complete stage 3 settings refactor

src/components/settings/LanguageSettings.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+}