"use client"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { Moon, Sun } from "lucide-react"; import { useTheme } from "next-themes"; const ThemeToggle = () => { const { resolvedTheme, setTheme } = useTheme(); const handleTheme = () => { if (resolvedTheme == "light") { setTheme("dark"); } else { setTheme("light"); } }; return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline" size="icon" className="md:border-input border-transparent" onClick={handleTheme} > <span className="sr-only">Toggle theme</span> <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" /> </Button> </DropdownMenuTrigger> </DropdownMenu> ); }; export default ThemeToggle;