95 lines
3.1 KiB
TypeScript
95 lines
3.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|