109 lines
3.9 KiB
TypeScript
109 lines
3.9 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-52 rounded-xl p-1.5 z-[100] shadow-2xl max-h-[70vh] overflow-y-auto"
|
|
style={{
|
|
background: theme.isDark ? "rgba(10, 10, 25, 0.95)" : "rgba(255, 255, 255, 0.97)",
|
|
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
backdropFilter: "blur(30px) saturate(180%)",
|
|
WebkitBackdropFilter: "blur(30px) saturate(180%)",
|
|
}}
|
|
>
|
|
<div className="px-2.5 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: theme.isDark ? "#64748b" : "#94a3b8" }}>
|
|
Themes
|
|
</div>
|
|
{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"
|
|
style={{
|
|
background: theme.name === t.name
|
|
? (theme.isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)")
|
|
: "transparent",
|
|
color: theme.name === t.name
|
|
? (theme.isDark ? "#f1f5f9" : "#1e293b")
|
|
: (theme.isDark ? "#94a3b8" : "#64748b"),
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (theme.name !== t.name)
|
|
e.currentTarget.style.background = theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.03)";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (theme.name !== t.name)
|
|
e.currentTarget.style.background = "transparent";
|
|
}}
|
|
>
|
|
<span
|
|
className="w-4 h-4 rounded-full shrink-0"
|
|
style={{
|
|
background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
|
|
boxShadow: `0 0 8px ${t.swatch[0]}40`,
|
|
border: "1px solid rgba(255,255,255,0.15)",
|
|
}}
|
|
/>
|
|
<span className="flex-1 text-left font-medium">{t.label}</span>
|
|
{theme.name === t.name && (
|
|
<span style={{ color: t.swatch[0], fontSize: "14px" }}>●</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|