import React, { useState } from "react"; import { useTheme, type ThemeName } from "../styles/ThemeProvider"; import "./ThemeSwitcher.css"; interface ThemeSwitcherProps { variant?: "dropdown" | "buttons" | "compact"; showLabel?: boolean; } const themeIcons: Record = { light: "☀️", dark: "🌙", sepia: "📜", noir: "⚫", ocean: "🌊", forest: "🌲", gruvbox: "🍂", }; const themeLabels: Record = { light: "Light", dark: "Dark", sepia: "Sepia", noir: "Noir", ocean: "Ocean", forest: "Forest", gruvbox: "Gruvbox", }; export const ThemeSwitcher: React.FC = ({ variant = "dropdown", showLabel = true, }) => { const { themeName, setTheme, availableThemes } = useTheme(); const [isOpen, setIsOpen] = useState(false); const handleThemeChange = (theme: ThemeName) => { setTheme(theme); setIsOpen(false); }; const cycleTheme = () => { const currentIndex = availableThemes.indexOf(themeName); const nextIndex = (currentIndex + 1) % availableThemes.length; setTheme(availableThemes[nextIndex]); }; if (variant === "compact") { return ( ); } if (variant === "buttons") { return (
{showLabel && Theme:}
{availableThemes.map((theme) => ( ))}
); } // Default dropdown variant return (
{isOpen && ( <>
setIsOpen(false)} aria-hidden="true" />
{availableThemes.map((theme) => ( ))}
)}
); };