blob: 6fd84fa361a1f02432019fd830f3ed19672fbba7 (
plain) (
blame)
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
|
"use client";
import { Button } from "./ui/button";
import { useTheme } from "next-themes";
import { cn } from "@/utils/ui";
import { Sun03Icon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
interface ThemeToggleProps {
className?: string;
iconClassName?: string;
onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}
export function ThemeToggle({
className,
iconClassName,
onToggle,
}: ThemeToggleProps) {
const { theme, setTheme } = useTheme();
return (
<Button
size="icon"
variant="ghost"
className={cn("size-8", className)}
onClick={(e) => {
setTheme(theme === "dark" ? "light" : "dark");
onToggle?.(e);
}}
>
<HugeiconsIcon
icon={Sun03Icon}
className={cn("!size-[1.1rem]", iconClassName)}
/>
<span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
</Button>
);
}
|
