Ripple-Button

import { useState } from "react";
import { motion } from "framer-motion";

interface Ripple {
  id: number;
  x: number;
  y: number;
}

interface RippleButtonProps {
  color?: string;
  radius?: number;
  text?: string;
  intensity?: number;
}

export default function RippleButton({
  color = "#0071e3",
  radius = 24,
  text = "Klick mich",
  intensity = 1,
}: RippleButtonProps) {
  const [ripples, setRipples] = useState<Ripple[]>([]);

  return (
    <button
      type="button"
      className="relative overflow-hidden px-6 py-3 text-sm font-semibold text-white shadow-lg"
      style={{ backgroundColor: color, borderRadius: radius }}
      onClick={(e) => {
        const r = e.currentTarget.getBoundingClientRect();
        const id = Date.now();
        setRipples((p) => [...p, { id, x: e.clientX - r.left, y: e.clientY - r.top }]);
        setTimeout(() => setRipples((p) => p.filter((rp) => rp.id !== id)), 700);
      }}
    >
      <span className="relative z-10">{text}</span>
      {ripples.map((r) => (
        <motion.span
          key={r.id}
          className="absolute rounded-full bg-white/40"
          style={{ left: r.x, top: r.y, width: 10, height: 10, x: "-50%", y: "-50%" }}
          initial={{ scale: 0, opacity: 0.8 }}
          animate={{ scale: 20 * intensity, opacity: 0 }}
          transition={{ duration: 0.7, ease: "easeOut" }}
        />
      ))}
    </button>
  );
}