ThemeToggleButton.tsx (1154B)
1 "use client"; 2 3 export const runtime = "edge"; 4 5 import { useTheme } from '@/hooks/useTheme'; 6 7 const SunIcon = () => ( 8 <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> 9 <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /> 10 </svg> 11 ); 12 13 const MoonIcon = () => ( 14 <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> 15 <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> 16 </svg> 17 ); 18 19 20 export default function ThemeToggleButton() { 21 const { theme, setTheme } = useTheme(); 22 23 const toggleTheme = () => { 24 setTheme(theme === 'light' ? 'dark' : 'light'); 25 }; 26 27 return ( 28 <button onClick={toggleTheme} className="p-2 rounded-md hover:bg-secondary cursor-pointer"> 29 {theme === 'light' ? <MoonIcon /> : <SunIcon />} 30 </button> 31 ); 32 }