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.
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { isDecember } from "@/lib/utils/christmas"
|
|
|
|
export function ChristmasDecorations() {
|
|
const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number }>>([])
|
|
const [isDec, setIsDec] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setIsDec(isDecember())
|
|
|
|
if (isDecember()) {
|
|
// Generate snowflakes
|
|
const flakes = Array.from({ length: 30 }, (_, i) => ({
|
|
id: i,
|
|
left: Math.random() * 100,
|
|
delay: Math.random() * 5,
|
|
duration: 8 + Math.random() * 4,
|
|
}))
|
|
setSnowflakes(flakes)
|
|
}
|
|
}, [])
|
|
|
|
if (!isDec) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
|
|
{/* Snowflakes */}
|
|
{snowflakes.map((flake) => (
|
|
<div
|
|
key={flake.id}
|
|
className="absolute top-0 text-white/60 text-xs animate-snowflake"
|
|
style={{
|
|
left: `${flake.left}%`,
|
|
animationDelay: `${flake.delay}s`,
|
|
animationDuration: `${flake.duration}s`,
|
|
}}
|
|
>
|
|
❄
|
|
</div>
|
|
))}
|
|
|
|
{/* Twinkling stars in corners */}
|
|
<div className="absolute top-4 left-4 text-yellow-300 animate-twinkle text-lg">
|
|
✨
|
|
</div>
|
|
<div className="absolute top-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '0.5s' }}>
|
|
✨
|
|
</div>
|
|
<div className="absolute bottom-4 left-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1s' }}>
|
|
✨
|
|
</div>
|
|
<div className="absolute bottom-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1.5s' }}>
|
|
✨
|
|
</div>
|
|
|
|
{/* Christmas tree emoji decorations */}
|
|
<div className="absolute top-8 left-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '2s' }}>
|
|
🎄
|
|
</div>
|
|
<div className="absolute top-8 right-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '3s' }}>
|
|
🎄
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|