e7fcfd63a2
Introduces a Christmas theme that activates in December, including themed colors, subtle background patterns, and snowflake effects on loading screens. Adds a reusable SnowLoader component and utility for December detection. Updates layout and loading components to conditionally apply decorations and styles only during December.
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { isDecember } from "@/lib/utils/christmas"
|
|
|
|
interface SnowLoaderProps {
|
|
className?: string;
|
|
count?: number;
|
|
}
|
|
|
|
export function SnowLoader({ className = "", count = 20 }: SnowLoaderProps) {
|
|
const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number; size: number }>>([])
|
|
const [isDec, setIsDec] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setIsDec(isDecember())
|
|
|
|
if (isDecember()) {
|
|
// Generate snowflakes
|
|
const flakes = Array.from({ length: count }, (_, i) => ({
|
|
id: i,
|
|
left: Math.random() * 100,
|
|
delay: Math.random() * 3,
|
|
duration: 5 + Math.random() * 3,
|
|
size: 0.5 + Math.random() * 0.5,
|
|
}))
|
|
setSnowflakes(flakes)
|
|
}
|
|
}, [count])
|
|
|
|
if (!isDec) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
|
|
{snowflakes.map((flake) => (
|
|
<div
|
|
key={flake.id}
|
|
className="absolute top-0 text-white/70 text-xs animate-snowflake"
|
|
style={{
|
|
left: `${flake.left}%`,
|
|
animationDelay: `${flake.delay}s`,
|
|
animationDuration: `${flake.duration}s`,
|
|
fontSize: `${flake.size}rem`,
|
|
}}
|
|
>
|
|
❄
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|