1  import { Moon, Sun } from "lucide-react"
 2  
 3  import { Button } from "@/components/ui/button"
 4  import {
 5    DropdownMenu,
 6    DropdownMenuContent,
 7    DropdownMenuItem,
 8    DropdownMenuTrigger,
 9  } from "@/components/ui/dropdown-menu"
10  import { useTheme } from "@/components/theme-provider"
11  
12  export function ModeToggle() {
13    const { setTheme } = useTheme()
14  
15    return (
16      <DropdownMenu>
17        <DropdownMenuTrigger asChild>
18          <Button variant="outline" size="icon">
19            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
20            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
21            <span className="sr-only">Toggle theme</span>
22          </Button>
23        </DropdownMenuTrigger>
24        <DropdownMenuContent align="end">
25          <DropdownMenuItem onClick={() => setTheme("light")}>
26            Light
27          </DropdownMenuItem>
28          <DropdownMenuItem onClick={() => setTheme("dark")}>
29            Dark
30          </DropdownMenuItem>
31          <DropdownMenuItem onClick={() => setTheme("system")}>
32            System
33          </DropdownMenuItem>
34        </DropdownMenuContent>
35      </DropdownMenu>
36    )
37  }