| "use client"; |
|
|
| import { Moon, Sun, Monitor } from "lucide-react"; |
| import { useTheme } from "next-themes"; |
| import { useState, useEffect } from "react"; |
|
|
| export function ThemeToggle() { |
| const { theme, setTheme } = useTheme(); |
| const [mounted, setMounted] = useState(false); |
|
|
| useEffect(() => setMounted(true), []); |
|
|
| if (!mounted) return <div className="h-9 w-9" />; |
|
|
| const themes = [ |
| { id: "light", icon: Sun, label: "Light" }, |
| { id: "dark", icon: Moon, label: "Dark" }, |
| { id: "system", icon: Monitor, label: "System" }, |
| ]; |
|
|
| const currentIdx = themes.findIndex((t) => t.id === theme); |
| const next = themes[(currentIdx + 1) % themes.length]; |
| const Current = themes[currentIdx >= 0 ? currentIdx : 0]?.icon || Sun; |
|
|
| return ( |
| <button |
| onClick={() => setTheme(next.id)} |
| className="neo-interactive bg-[var(--card)] p-2" |
| title={`Switch to ${next.label} mode`} |
| > |
| <Current className="h-4 w-4 text-[var(--foreground)]" /> |
| </button> |
| ); |
| } |
|
|
