spb/market-atlas

1"use client";23import { Moon, Sun } from "lucide-react";4import { useEffect, useState } from "react";5import { THEME_KEY } from "@/lib/prepaint";67export function ThemeToggle({ className }: { className?: string }) {8  const [theme, setTheme] = useState<"light" | "dark">("light");9  useEffect(() => {10    setTheme((document.documentElement.getAttribute("data-theme") as "light" | "dark") ?? "light");11  }, []);12  const toggle = () => {13    const next = theme === "dark" ? "light" : "dark";14    setTheme(next);15    document.documentElement.setAttribute("data-theme", next);16    document.documentElement.style.colorScheme = next;17    try {18      localStorage.setItem(THEME_KEY, next);19    } catch {20      /* ignore */21    }22  };23  return (24    <button type="button" onClick={toggle} aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"} className={`inline-flex h-11 w-11 items-center justify-center rounded-md text-ink-2 hover:bg-surface-2 hover:text-ink ${className ?? ""}`}>25      {theme === "dark" ? <Sun size={17} /> : <Moon size={17} />}26    </button>27  );28}29