Spaces:
Sleeping
Sleeping
'use client'; | |
import * as React from 'react'; | |
import { useTheme } from 'next-themes'; | |
import { Button } from '@/components/ui/Buttons'; | |
import { IconMoon, IconSun } from '@/components/ui/Icon'; | |
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 ? null : theme === 'dark' ? ( | |
<IconMoon className="transition-all" /> | |
) : ( | |
<IconSun className="transition-all" /> | |
)} | |
<span className="sr-only">Toggle theme</span> | |
</Button> | |
); | |
} | |