Add responsive branded header and sound controls

2026-03-09 06:54:47 +01:00
parent a65037e3b3
commit 9d76eabb39
16 changed files with 616 additions and 136 deletions
@@ -0,0 +1,49 @@
+"use client";
+
+import { Volume2, VolumeX } from "lucide-react";
+
+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;
+  variant?: ButtonProps["variant"];
+  className?: string;
+  iconClassName?: string;
+};
+
+export function SoundToggle({
+  ariaLabel = "Mute sounds",
+  mutedAriaLabel = "Unmute sounds",
+  variant = "outline",
+  className,
+  iconClassName,
+}: SoundToggleProps) {
+  const { isMuted, toggleMuted } = useSound();
+
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size="icon"
+      onClick={toggleMuted}
+      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>
+  );
+}