theme-button

1'use client';
2 
3import type { VariantProps } from 'class-variance-authority';
4import { Laptop, Moon, Sun } from 'lucide-react';
5import { useTheme } from 'next-themes';
6import * as React from 'react';
7import { Button, type buttonVariants } from '@/components/ui/button';
8 
9type ButtonProps = React.ComponentProps<'button'> &
10  VariantProps<typeof buttonVariants> & {
11    asChild?: boolean;
12  };
13 
14type Theme = 'system' | 'light' | 'dark';
15 
16export interface ThemeButtonProps extends ButtonProps {
17  withText?: boolean;
18}
19 
20export function ThemeButton({ withText, ...props }: ThemeButtonProps) {
21  const { theme, setTheme } = useTheme();
22  const [currentTheme, setCurrentTheme] = React.useState<Theme>('system');
23 
24  React.useEffect(() => {
25    setCurrentTheme(theme as Theme);
26  }, [theme]);
27 
28  const cycleTheme = () => {
29    const themes: Theme[] = ['system', 'light', 'dark'];
30    const currentIndex = themes.indexOf(currentTheme);
31    const nextIndex = (currentIndex + 1) % themes.length;
32    setTheme(themes[nextIndex]);
33  };
34 
35  const getThemeIcon = () => {
36    switch (currentTheme) {
37      case 'system':
38        return <Laptop className='size-[1.2rem]' />;
39      case 'light':
40        return <Sun className='size-[1.2rem]' />;
41      case 'dark':
42        return <Moon className='size-[1.2rem]' />;
43    }
44  };
45 
46  const getThemeText = () => {
47    return currentTheme.charAt(0).toUpperCase() + currentTheme.slice(1);
48  };
49 
50  return (
51    <Button variant='outline' size={withText ? 'default' : 'icon'} onClick={cycleTheme} {...props}>
52      {getThemeIcon()}
53      {withText && <span className='ml-2 capitalize'>{getThemeText()}</span>}
54      <span className='sr-only'>Toggle theme</span>
55    </Button>
56  );
57}