71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import { useEffect } from 'react'
|
|
import confetti from 'canvas-confetti'
|
|
|
|
export default function BirthdayBanner({ name = "Linh" }) {
|
|
useEffect(() => {
|
|
// Fire confetti on load
|
|
const duration = 3 * 1000
|
|
const animationEnd = Date.now() + duration
|
|
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
|
|
|
|
function randomInRange(min, max) {
|
|
return Math.random() * (max - min) + min
|
|
}
|
|
|
|
const interval = setInterval(function() {
|
|
const timeLeft = animationEnd - Date.now()
|
|
|
|
if (timeLeft <= 0) {
|
|
return clearInterval(interval)
|
|
}
|
|
|
|
const particleCount = 50 * (timeLeft / duration)
|
|
confetti({
|
|
...defaults,
|
|
particleCount,
|
|
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
|
|
})
|
|
confetti({
|
|
...defaults,
|
|
particleCount,
|
|
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
|
|
})
|
|
}, 250)
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
const handleClick = () => {
|
|
confetti({
|
|
particleCount: 100,
|
|
spread: 70,
|
|
origin: { y: 0.6 }
|
|
})
|
|
}
|
|
|
|
return (
|
|
<header
|
|
className="relative text-white py-16 md:py-24 cursor-pointer overflow-hidden"
|
|
onClick={handleClick}
|
|
style={{
|
|
backgroundImage: `url(/images/1.jpeg)`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-black/40"></div>
|
|
<div className="relative z-10 max-w-4xl mx-auto text-center px-4">
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
|
|
🎂 Happy birthday b {name}! 🎉
|
|
</h1>
|
|
<p className="text-xl md:text-2xl font-medium opacity-90">
|
|
Chúc mừng sinh nhật!
|
|
</p>
|
|
<p className="mt-4 text-lg opacity-75">
|
|
(Click để ăn pháo bông vào mồm ✨)
|
|
</p>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|