ripple button

taskncoffee-app/src/components/buttons.jsx

@@ -1,58 +1,42 @@
 "use client"
 
-import { AnimatePresence, motion } from "motion/react"
 import { useState } from "react"
+import { motion, AnimatePresence } from "motion/react"
 
-export default function ExitAnimation() {
-    const [isVisible, setIsVisible] = useState(true)
+export function useRipple() {
+    const [ripples, setRipples] = useState([])
 
-    const container = {
-        display: "flex",
-        flexDirection: "column",
-        width: 100,
-        height: 160,
-        position: "relative",
+    const addRipple = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        const id = Date.now()
+
+        setRipples((prev) => [...prev, { x, y, id }])
+
+        setTimeout(() => {
+            setRipples((prev) => prev.filter((r) => r.id !== id))
+        }, 600)
     }
 
-    const box = {
-        width: 100,
-        height: 100,
-        backgroundColor: "#0cdcf7",
-        borderRadius: 10,
-    }
-
-    const button = {
-        backgroundColor: "#0cdcf7",
-        borderRadius: 10,
-        padding: "10px 20px",
-        color: "#0f1115",
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        right: 0,
-    }
-
-    return (
-        <div style={container}>
-            <AnimatePresence initial={false}>
-                {isVisible && (
-                    <motion.div
-                        initial={{ opacity: 0, scale: 0 }}
-                        animate={{ opacity: 1, scale: 1 }}
-                        exit={{ opacity: 0, scale: 0 }}
-                        style={box}
-                        key="box"
-                    />
-                )}
-            </AnimatePresence>
-
-            <motion.button
-                style={button}
-                onClick={() => setIsVisible(!isVisible)}
-                whileTap={{ scale: 0.95 }}
-            >
-                {isVisible ? "Hide" : "Show"}
-            </motion.button>
-        </div>
+    const Ripples = (
+        <AnimatePresence>
+            {ripples.map((ripple) => (
+                <motion.span
+                    key={ripple.id}
+                    initial={{ scale: 0, opacity: 0.6 }}
+                    animate={{ scale: 4, opacity: 0 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.6, ease: "easeOut" }}
+                    style={{
+                        left: ripple.x,
+                        top: ripple.y,
+                    }}
+                    className="absolute h-8 w-8 rounded-full bg-white/70 pointer-events-none -translate-x-1/2 -translate-y-1/2"
+                />
+            ))}
+        </AnimatePresence>
     )
+
+    return { addRipple, Ripples }
 }