migrated to react

2026-03-27 22:15:50 +01:00
parent 11ac1e008f
commit 176f821598
24 changed files with 2281 additions and 888 deletions
@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+const THEMES = [
+  { value: 'mocha', label: 'Mocha' },
+  { value: 'macchiato', label: 'Macchiato' },
+  { value: 'frappe', label: 'Frappe' },
+  { value: 'latte', label: 'Latte' },
+  { value: 'scaled-and-icy', label: 'Scaled and Icy' },
+];
+
+interface Props {
+  defaultTheme?: string;
+}
+
+export default function ThemeSwitcher({ defaultTheme = 'mocha' }: Props) {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('user-theme') || defaultTheme;
+    }
+    return defaultTheme;
+  });
+
+  useEffect(() => {
+    document.documentElement.className = theme;
+    localStorage.setItem('user-theme', theme);
+  }, [theme]);
+
+  return (
+    <div className="relative inline-block text-left">
+      <select
+        value={theme}
+        onChange={(e) => setTheme(e.target.value)}
+        className="appearance-none bg-surface0/50 text-text border border-surface1 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-mauve transition-all cursor-pointer hover:bg-surface0 pr-8 shadow-sm"
+      >
+        {THEMES.map(t => (
+          <option key={t.value} value={t.value}>{t.label}</option>
+        ))}
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-subtext0">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-9"/></svg>
+      </div>
+    </div>
+  );
+}