mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Add responsive branded header and sound controls
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-09 06:54:47 +01:00
parent a65037e3b3
commit 9d76eabb39
16 changed files with 616 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/theme-toggle.tsx
+13 -4
View File
@@ -4,6 +4,7 @@ import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { useSound } from "@/components/sound-provider";
import { Button, type ButtonProps } from "@/components/ui/button";
import { cn } from "@/lib/utils";
@@ -23,6 +24,7 @@ export function ThemeToggle({
iconClassName,
}: ThemeToggleProps) {
const { setTheme, theme, resolvedTheme } = useTheme();
const { playSound } = useSound();
const [mounted, setMounted] = useState(false);
useEffect(() => {
@@ -38,7 +40,7 @@ export function ThemeToggle({
aria-label={ariaLabel}
className={cn("group cursor-pointer", label ? "justify-start" : undefined, className)}
>
<Moon className={cn("h-4 w-4 transition-transform duration-700 ease-out group-hover:scale-110 group-hover:rotate-[360deg]", 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>
);
@@ -47,19 +49,26 @@ export function ThemeToggle({
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");
};
return (
<Button
type="button"
variant={variant}
size={label ? "sm" : "icon"}
onClick={() => setTheme(isDark ? "light" : "dark")}
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-700 ease-out group-hover:scale-110 group-hover:rotate-[360deg]", iconClassName)} />
<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-700 ease-out group-hover:scale-110 group-hover:rotate-[360deg]", 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>