"use client" import * as React from "react" import { useState, useRef } from "react"; import { Button } from "@/components/ui/button"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; import type { ButtonProps } from "@/components/ui/button"; import { MousePointerClick } from "lucide-react"; interface ParticleButtonProps extends ButtonProps { onSuccess?: () => void; successDuration?: number; } function SuccessParticles({ buttonRef, }: { buttonRef: React.RefObject; }) { const rect = buttonRef.current?.getBoundingClientRect(); if (!rect) return null; const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; return ( {[...Array(6)].map((_, i) => ( ))} ); } function ParticleButton({ children, onClick, onSuccess, successDuration = 1000, className, ...props }: ParticleButtonProps) { const [showParticles, setShowParticles] = useState(false); const buttonRef = useRef(null); const handleClick = async (e: React.MouseEvent) => { setShowParticles(true); setTimeout(() => { setShowParticles(false); }, successDuration); }; return ( <> {showParticles && } ); } export { ParticleButton }