'use client'; import * as React from 'react'; import { useTheme } from 'next-themes'; import { Button } from '@/components/ui/Button'; import { IconMoon, IconSun } from '@/components/ui/Icons'; export function ThemeToggle() { const { setTheme, theme } = useTheme(); const [_, startTransition] = React.useTransition(); return ( <Button variant="ghost" size="icon" className="fixed bottom-4 right-4 z-50 dark:bg-zinc-950 dark:text-white transition-all p-2 rounded-full shadow-md" onClick={() => { startTransition(() => { setTheme(theme === 'light' ? 'dark' : 'light'); }); }} > {theme === 'dark' ? ( <IconMoon className="transition-all" /> ) : ( <IconSun className="transition-all" /> )} <span className="sr-only">Toggle theme</span> </Button> ); }