navigation login and signup

2025-10-09 23:51:00 +03:00
parent 1f351bc32b
commit b4f98fe6cd
6 changed files with 87 additions and 8 deletions
--- a/taskncoffee-app/src/components/test.jsx
+++ b/taskncoffee-app/src/components/test.jsx
@@ -0,0 +1,46 @@
+"use client"
+
+import React, { useState } from "react"
+import { motion, AnimatePresence } from "motion/react"
+
+export default function RippleButton({ children }) {
+    const [ripples, setRipples] = useState([])
+
+    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([...ripples, { x, y, id }])
+
+        setTimeout(() => {
+            setRipples((r) => r.filter((ripple) => ripple.id !== id))
+        }, 600) // ripple длится ~600ms
+    }
+
+    return (
+        <button
+            onClick={addRipple}
+            className="relative overflow-hidden rounded-lg bg-blue-600 px-4 py-2 text-white font-medium"
+        >
+            {children}
+            <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>
+        </button>
+    )
+}