Spaces:
Running
Running
File size: 2,062 Bytes
5012205 9ca7165 5012205 9ca7165 5012205 d8c725b 5012205 9ca7165 d8c725b 9ca7165 d8c725b 9ca7165 5012205 9ca7165 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
"use client"
import * as React from "react"
import { CircleDashed, Flame, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "./ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"
import { cn } from "@/lib/utils"
export function ThemeToggle({ className, ...props }: React.ComponentProps<typeof Button>) {
const { setTheme } = useTheme()
return (
<DropdownMenu>
<DropdownMenuTrigger asChild={true}>
<Button
variant="ghost"
size="icon"
className={cn(`rounded-md h-8 w-8`, className)}
{...props}
>
<Flame className="h-4 w-4 rotate-0 scale-100 transition-all light:scale-0 light:-rotate-90 black:scale-0 black:-rotate-90 hover:text-sidebar-accent" />
<Sun className="absolute h-4 w-4 rotate-90 scale-0 transition-all light:rotate-0 light:scale-100 black:scale-0 black:rotate-0 hover:text-sidebar-accent" />
<CircleDashed className="absolute h-4 w-4 rotate-90 scale-0 transition-all black:rotate-0 black:scale-100 light:scale-0 light:rotate-0 hover:text-sidebar-accent" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onSelect={() => setTheme("dark")}>
<Flame className="mr-2 h-4 w-4" />
<span>Dark</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setTheme("light")}>
<Sun className="mr-2 h-4 w-4" />
<span>Light</span>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setTheme("black")}>
<CircleDashed className="mr-2 h-4 w-4" />
<span>Black</span>
</DropdownMenuItem>
{/* sunset theme */}
<DropdownMenuItem onSelect={() => setTheme("sunset")}>
<Sun className="mr-2 h-4 w-4" />
<span>Sunset</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
} |