"use client"; import { cn } from "@/lib/utils"; import React, { MouseEvent, useEffect, useState } from "react"; interface RippleButtonProps extends React.ButtonHTMLAttributes { rippleColor?: string; duration?: string; } const RippleButton = React.forwardRef( ( { className, children, rippleColor = "#ffffff", duration = "600ms", onClick, ...props }, ref, ) => { const [buttonRipples, setButtonRipples] = useState< Array<{ x: number; y: number; size: number; key: number }> >([]); const handleClick = (event: MouseEvent) => { createRipple(event); onClick?.(event); }; const createRipple = (event: MouseEvent) => { const button = event.currentTarget; const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; const newRipple = { x, y, size, key: Date.now() }; setButtonRipples((prevRipples) => [...prevRipples, newRipple]); }; useEffect(() => { if (buttonRipples.length > 0) { const lastRipple = buttonRipples[buttonRipples.length - 1]; const timeout = setTimeout(() => { setButtonRipples((prevRipples) => prevRipples.filter((ripple) => ripple.key !== lastRipple.key), ); }, parseInt(duration)); return () => clearTimeout(timeout); } }, [buttonRipples, duration]); return ( ); }, ); RippleButton.displayName = "RippleButton"; export { RippleButton };