"use client"; import React, { useState } from "react"; import confetti from "canvas-confetti"; import { Button } from "@/components/ui/button"; import { motion } from "framer-motion"; import { Loader2, Check } from "lucide-react"; export function ConfettiSubmit() { const [status, setStatus] = useState<"idle" | "loading" | "success">("idle"); const handleClick = async () => { if (status !== "idle") return; setStatus("loading"); // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)); setStatus("success"); triggerConfetti(); // Reset after a delay setTimeout(() => setStatus("idle"), 3000); }; const triggerConfetti = () => { const end = Date.now() + 1000; const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"]; (function frame() { confetti({ particleCount: 2, angle: 60, spread: 55, origin: { x: 0 }, colors: colors, }); confetti({ particleCount: 2, angle: 120, spread: 55, origin: { x: 1 }, colors: colors, }); if (Date.now() < end) { requestAnimationFrame(frame); } })(); }; return (

); }

Confetti Explosion Submit