38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";
|
|
import {Button} from "@/components/ui/button";
|
|
import {Moon, Sun} from "lucide-react";
|
|
import {useTheme} from "next-themes";
|
|
import {cn} from "@/lib/utils";
|
|
|
|
const AppearanceDropdown = () => {
|
|
const {setTheme, theme} = useTheme();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-7 w-7")}
|
|
>
|
|
{theme == 'light' ? <Sun/> : <Moon/>}
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default AppearanceDropdown;
|