60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Volume2, VolumeX } from "lucide-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 SoundToggleProps = {
|
|
ariaLabel?: string;
|
|
mutedAriaLabel?: string;
|
|
mutedToastLabel?: string;
|
|
unmutedToastLabel?: string;
|
|
variant?: ButtonProps["variant"];
|
|
className?: string;
|
|
iconClassName?: string;
|
|
};
|
|
|
|
export function SoundToggle({
|
|
ariaLabel = "Mute sounds",
|
|
mutedAriaLabel = "Unmute sounds",
|
|
mutedToastLabel = "Sound muted",
|
|
unmutedToastLabel = "Sound enabled",
|
|
variant = "outline",
|
|
className,
|
|
iconClassName,
|
|
}: SoundToggleProps) {
|
|
const { isMuted, toggleMuted } = useSound();
|
|
|
|
const handleToggle = () => {
|
|
toggleMuted();
|
|
toast(isMuted ? unmutedToastLabel : mutedToastLabel);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant={variant}
|
|
size="icon"
|
|
onClick={handleToggle}
|
|
aria-label={isMuted ? mutedAriaLabel : ariaLabel}
|
|
aria-pressed={isMuted}
|
|
className={cn("group cursor-pointer", className)}
|
|
>
|
|
{isMuted ? (
|
|
<VolumeX
|
|
strokeWidth={1.6}
|
|
className={cn("h-[1.125rem] w-[1.125rem] transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)}
|
|
/>
|
|
) : (
|
|
<Volume2
|
|
strokeWidth={1.6}
|
|
className={cn("h-[1.125rem] w-[1.125rem] transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)}
|
|
/>
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|