feat(web): ThemeSwitch icon segmented control + theme.* i18n (#59)

2026-06-07 16:33:16 +02:00
parent d452dd9b35
commit 6d17e5f84d
5 changed files with 122 additions and 0 deletions
@@ -0,0 +1,43 @@
+import { Monitor, Moon, Sun } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useTheme } from "../theme/use-theme";
+import type { Theme } from "../theme/theme";
+import { cn } from "@/lib/utils";
+
+const OPTIONS: { value: Theme; Icon: typeof Sun }[] = [
+  { value: "light", Icon: Sun },
+  { value: "dark", Icon: Moon },
+  { value: "system", Icon: Monitor },
+];
+
+export function ThemeSwitch() {
+  const { t } = useTranslation();
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className="flex gap-1">
+      {OPTIONS.map(({ value, Icon }) => {
+        const active = theme === value;
+        return (
+          <button
+            key={value}
+            type="button"
+            onClick={() => setTheme(value)}
+            aria-pressed={active}
+            aria-label={t(`theme.${value}`)}
+            title={t(`theme.${value}`)}
+            className={cn(
+              "rounded-md p-1 transition-colors",
+              active
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            <Icon className="h-4 w-4" aria-hidden />
+          </button>
+        );
+      })}
+    </div>
+  );
+}