Theme Switch Button

1"use client";
2 
3import { MoonIcon, SunIcon } from "lucide-react";
4import { Button } from "@/components/ui/button";
5import { useTheme } from "next-themes";
6import { useCallback } from "react";
7import { cn } from "@/lib/utils";
8 
9const ThemeSwitch = ({
10  className,
11  ...props
12}: React.HTMLAttributes<HTMLButtonElement>) => {
13  const { theme, setTheme } = useTheme();
14 
15  const handleToggleTheme = useCallback(() => {
16    const newTheme = theme === "light" ? "dark" : "light";
17    setTheme(newTheme);
18  }, [theme, setTheme]);
19 
20  return (
21    <Button
22      size="icon"
23      variant="ghost"
24      className={cn("size-8 group", className)}
25      aria-label="Toggle theme between light and dark mode"
26      onClick={handleToggleTheme}
27      {...props}
28    >
29      <MoonIcon
30        className="hidden dark:block fill-transparent group-hover:fill-foreground group-hover:rotate-12 group-hover:scale-110 transition-all duration-200 ease-out"
31        aria-hidden="true"
32      />
33      <SunIcon
34        className="dark:hidden fill-transparent group-hover:fill-foreground group-hover:rotate-12 group-hover:scale-110 transition-all duration-200 ease-out"
35        aria-hidden="true"
36      />
37    </Button>
38  );
39};
40 
41export default ThemeSwitch;