Theme Switch Toggle

1"use client";
2 
3import { MoonIcon, SunIcon } from "lucide-react";
4import { Switch } from "@/components/ui/switch";
5import { useTheme } from "next-themes";
6import { useCallback, useEffect, useState } from "react";
7import { cn } from "@/lib/utils";
8 
9const ThemeSwitch = ({
10  className,
11  ...props
12}: React.HTMLAttributes<HTMLDivElement>) => {
13  const { theme, setTheme } = useTheme();
14  const [checked, setChecked] = useState(false);
15 
16  // Update checked state when theme changes
17  useEffect(() => {
18    setChecked(theme === "dark");
19  }, [theme]);
20 
21  const handleCheckedChange = useCallback(
22    (isChecked: boolean) => {
23      setChecked(isChecked);
24      const newTheme = isChecked ? "dark" : "light";
25      setTheme(newTheme);
26    },
27    [setTheme],
28  );
29 
30  return (
31    <div
32      className={cn("relative flex items-center h-9 group", className)}
33      {...props}
34    >
35      <Switch
36        checked={checked}
37        onCheckedChange={handleCheckedChange}
38        className="peer data-checked:bg-input/50 data-unchecked:bg-input/50 absolute inset-0 !h-[inherit] !w-auto [&_span]:!h-full [&_span]:!w-[34px]"
39      />
40      <span className="peer-data-checked:text-muted-foreground/70 pointer-events-none relative ms-0.5 flex min-w-8 items-center justify-center text-center">
41        <SunIcon
42          size={16}
43          aria-hidden="true"
44          className={cn(
45            !checked &&
46              "fill-transparent group-hover:fill-foreground group-hover:rotate-12 group-hover:scale-110 transition-all duration-200 ease-out",
47          )}
48        />
49      </span>
50      <span className="peer-data-unchecked:text-muted-foreground/70 pointer-events-none relative me-0.5 flex min-w-8 items-center justify-center text-center">
51        <MoonIcon
52          size={16}
53          aria-hidden="true"
54          className={cn(
55            checked &&
56              "fill-transparent group-hover:fill-foreground group-hover:rotate-12 group-hover:scale-110 transition-all duration-200 ease-out",
57          )}
58        />
59      </span>
60    </div>
61  );
62};
63 
64export default ThemeSwitch;