Spaces:
Sleeping
Sleeping
| "use client"; | |
| import * as React from "react"; | |
| import { Moon, Sun } from "lucide-react"; | |
| import { useTheme } from "@/components/theme-provider"; | |
| import { Button } from "@/components/ui/button"; | |
| import { | |
| DropdownMenu, | |
| DropdownMenuContent, | |
| DropdownMenuItem, | |
| DropdownMenuTrigger, | |
| } from "@/components/ui/dropdown-menu"; | |
| export function ThemeToggle() { | |
| const { theme, setTheme } = useTheme(); | |
| const [mounted, setMounted] = React.useState(false); | |
| React.useEffect(() => { | |
| setMounted(true); | |
| }, []); | |
| if (!mounted) { | |
| return <Button variant="ghost" size="icon" disabled={true} />; | |
| } | |
| return ( | |
| <DropdownMenu> | |
| <DropdownMenuTrigger asChild> | |
| <Button variant="ghost" size="icon"> | |
| <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 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> | |
| ); | |
| } | |