83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Moon, Sun } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { useSound } from "@/components/sound-provider";
|
|
import { Button, type ButtonProps } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ThemeToggleProps = {
|
|
ariaLabel?: string;
|
|
label?: string;
|
|
lightToastLabel?: string;
|
|
darkToastLabel?: string;
|
|
variant?: ButtonProps["variant"];
|
|
className?: string;
|
|
iconClassName?: string;
|
|
};
|
|
|
|
export function ThemeToggle({
|
|
ariaLabel = "Toggle theme",
|
|
label,
|
|
lightToastLabel = "Light mode enabled",
|
|
darkToastLabel = "Dark mode enabled",
|
|
variant = "outline",
|
|
className,
|
|
iconClassName,
|
|
}: ThemeToggleProps) {
|
|
const { setTheme, theme, resolvedTheme } = useTheme();
|
|
const { playSound } = useSound();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant={variant}
|
|
size={label ? "sm" : "icon"}
|
|
aria-label={ariaLabel}
|
|
className={cn("group cursor-pointer", label ? "justify-start" : undefined, className)}
|
|
>
|
|
<Moon className={cn("h-4 w-4 transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)} />
|
|
{label ? <span>{label}</span> : null}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
const activeTheme = theme === "system" ? resolvedTheme : theme;
|
|
const isDark = activeTheme === "dark";
|
|
|
|
const handleThemeToggle = () => {
|
|
const nextTheme = isDark ? "light" : "dark";
|
|
|
|
setTheme(nextTheme);
|
|
playSound(nextTheme === "dark" ? "/audio/dark.mp3" : "/audio/light.mp3");
|
|
toast(nextTheme === "dark" ? darkToastLabel : lightToastLabel);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant={variant}
|
|
size={label ? "sm" : "icon"}
|
|
onClick={handleThemeToggle}
|
|
aria-label={ariaLabel}
|
|
className={cn("group cursor-pointer", label ? "justify-start" : undefined, className)}
|
|
>
|
|
{isDark ? (
|
|
<Sun className={cn("h-4 w-4 transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)} />
|
|
) : (
|
|
<Moon className={cn("h-4 w-4 transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)} />
|
|
)}
|
|
{label ? <span>{label}</span> : null}
|
|
</Button>
|
|
);
|
|
}
|