Spaces:
Runtime error
Runtime error
| "use client" | |
| import * as React from "react" | |
| import { Moon, Sun } from "lucide-react" | |
| import { useTheme } from "next-themes" | |
| import { Button } from "@/components/ui/button" | |
| import { | |
| DropdownMenu, | |
| DropdownMenuContent, | |
| DropdownMenuItem, | |
| DropdownMenuTrigger, | |
| } from "@/components/ui/dropdown-menu" | |
| export function ModeToggle() { | |
| const { setTheme } = useTheme() | |
| return ( | |
| <DropdownMenu> | |
| <DropdownMenuTrigger asChild> | |
| <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full"> | |
| <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" className="glass border-white/10"> | |
| <DropdownMenuItem onClick={() => setTheme("light")} className="focus:bg-white/10 cursor-pointer"> | |
| Light | |
| </DropdownMenuItem> | |
| <DropdownMenuItem onClick={() => setTheme("dark")} className="focus:bg-white/10 cursor-pointer"> | |
| Dark | |
| </DropdownMenuItem> | |
| <DropdownMenuItem onClick={() => setTheme("system")} className="focus:bg-white/10 cursor-pointer"> | |
| System | |
| </DropdownMenuItem> | |
| </DropdownMenuContent> | |
| </DropdownMenu> | |
| ) | |
| } | |