28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import * as React from 'react';
|
|
import { Moon, Sun } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useColorMode } from '@/components/ui/ThemeProvider';
|
|
import { cn } from 'helpers/cn';
|
|
|
|
export const ModeToggle = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
|
|
({ className, ...props }, ref) => {
|
|
const { colorMode, setColorMode } = useColorMode();
|
|
|
|
return (
|
|
<Button
|
|
ref={ref}
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
|
|
className={cn('h-9 w-9', className)}
|
|
{...props}
|
|
>
|
|
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span className="sr-only">Toggle color mode</span>
|
|
</Button>
|
|
);
|
|
},
|
|
);
|
|
ModeToggle.displayName = 'ModeToggle';
|