34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@workspace/ui/components/dropdown-menu';
|
|
import MoonLottie from '@workspace/ui/lotties/moon.json';
|
|
import SunLottie from '@workspace/ui/lotties/sun.json';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
export default function ThemeSwitch() {
|
|
const { setTheme, resolvedTheme } = useTheme();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant='ghost' size='icon'>
|
|
<DotLottieReact data={resolvedTheme === 'dark' ? MoonLottie : SunLottie} autoplay loop />
|
|
<span className='sr-only'>Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align='end'>
|
|
<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|