Sanitized mirror from private repository - 2026-04-05 10:15:27 UTC

dashboard/ui/components/theme-switcher.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "@/components/theme-provider";
+import { themes } from "@/lib/themes";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    if (open) {
+      document.addEventListener("keydown", handleKey);
+      return () => document.removeEventListener("keydown", handleKey);
+    }
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 hover:bg-[var(--nav-hover)]"
+        aria-label="Switch theme"
+      >
+        <span
+          className="w-3 h-3 rounded-full shrink-0 border border-white/10"
+          style={{
+            background: `linear-gradient(135deg, ${theme.swatch[0]}, ${theme.swatch[1]})`,
+          }}
+        />
+        <span className="text-muted-foreground hidden sm:inline">{theme.label}</span>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 top-full mt-2 w-48 rounded-xl border p-1.5 z-[100] backdrop-blur-xl shadow-xl"
+          style={{
+            background: "var(--card-bg)",
+            borderColor: "var(--card-border)",
+          }}
+        >
+          {themes.map((t) => (
+            <button
+              key={t.name}
+              onClick={() => {
+                setTheme(t.name);
+                setOpen(false);
+              }}
+              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-xs transition-all duration-150 ${
+                theme.name === t.name
+                  ? "bg-[var(--nav-active)] text-[var(--foreground)]"
+                  : "text-[var(--muted-foreground)] hover:bg-[var(--nav-hover)] hover:text-[var(--foreground)]"
+              }`}
+              style={
+                theme.name === t.name
+                  ? { color: "hsl(var(--foreground))" }
+                  : { color: "hsl(var(--muted-foreground))" }
+              }
+            >
+              <span
+                className="w-4 h-4 rounded-full shrink-0 border border-white/10"
+                style={{
+                  background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
+                }}
+              />
+              <span className="flex-1 text-left">{t.label}</span>
+              {theme.name === t.name && (
+                <span className="text-[10px] opacity-60">current</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}