Code

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";
import confetti from "canvas-confetti";

const ImprovedConfettiButton = () => {
  const [isAnimating, setIsAnimating] = useState(false);

  const handleConfetti = () => {
    setIsAnimating(true);
   ());
  };

  return (
    <motion.button
      onClick={handleConfetti}
      className="relative px-8 py-4 bg-gradient-to-br from-purple-700 to-pink-800 
                 text-white font-semibold rounded-full shadow-lg 
                 overflow-hidden"
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      animate={isAnimating ? { rotate: [0, -10, 10, -10, 10, 0] } : {}}
      transition={{ duration: 0.5 }}
    >
      <span className="relative z-10">Celebrate!</span>
      <motion.span
        className="absolute inset-0 bg-white rounded-full"
        initial={{ scale: 0, opacity: 0.5 }}
        animate={isAnimating ? { scale: 2, opacity: 0 } : { scale: 0, opacity: 0.5 }}
        transition={{ duration: 0.5 }}
      />
      <motion.span
        className="absolute inset-0 border-2 border-white rounded-full"
        initial={{ scale: 1 }}
        animate={isAnimating ? { scale: 1.5, opacity: 0 } : { scale: 1, opacity: 1 }}
        transition={{ duration: 0.5 }}
      />
    </motion.button>
  );
};

export default ImprovedConfettiButton;