```tsx import React from "react"; import { LucideIcon, Heart } from "lucide-react"; import { useEffect } from "react"; const Confetti: React.FC = () => { useEffect(() => { const canvas = document.getElementById("confetti") as HTMLCanvasElement; const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; let particles: { x: number; y: number; opacity: number; }[] = []; const createParticle = () => { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, opacity: Math.random(), }); }; const drawParticles = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((particle, index) => { ctx.fillStyle = `rgba(255, 165, 0, ${particle.opacity})`; ctx.beginPath(); ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2); ctx.fill(); particle.y += 1; particle.opacity -= 0.01; if (particle.opacity <= 0) particles.splice(index, 1); }); requestAnimationFrame(drawParticles); }; for (let i = 0; i < 100; i++) { createParticle(); } drawParticles(); }, []); return

Happy Birthday!