React Confetti Component

'use client'
import { useState } from 'react'
const pieces = Array.from({ length: 32 }, (_, i) => ({ left: (i * 41) % 100, delay: (i % 8) * 60 }))
export function ConfettiButton() {
  const [active, setActive] = useState(false)
  return (
    <div className="relative grid min-h-52 place-items-center overflow-hidden">
      {active && pieces.map((piece, i) => <span key={i} aria-hidden="true"
        className="absolute top-0 h-3 w-2 animate-bounce bg-violet-500 motion-reduce:hidden"
        style={{ left: piece.left + '%', animationDelay: piece.delay + 'ms' }} />)}
      <button onClick={() => { setActive(false); requestAnimationFrame(() => setActive(true)) }} className="relative rounded-xl bg-violet-600 px-5 py-3 font-bold text-white">Celebrate</button>
    </div>
  )
}