"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; const MorphingButton = () => { const [isCircle, setIsCircle] = useState(false); return ( setIsCircle(!isCircle)} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} > {isCircle ? "O" : "Morph"} ); }; const DropdownButton = () => { const [isOpen, setIsOpen] = useState(false); return (

setIsOpen(!isOpen)} > Select Option {isOpen && ( {["Option 1", "Option 2", "Option 3"].map((option) => ( ))} )}

); }; const SubmitButton = () => { const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = () => { setIsSubmitting(true); setTimeout(() => setIsSubmitting(false), 2000); }; return ( {isSubmitting ? ( <> Submitting... ) : ( Submit Form )} ); }; const RippleButton = () => { const [ripples, setRipples] = useState([]); const addRipple = (event:any) => { const button = event.currentTarget.getBoundingClientRect(); const size = Math.max(button.width, button.height); const x = event.clientX - button.left - size / 2; const y = event.clientY - button.top - size / 2; const newRipple = { x, y, size, id: new Date().getTime(), }; setRipples([...ripples, newRipple]); }; return ( Ripple {ripples.map((ripple:any) => ( setRipples(ripples.filter((r:any) => r.id !== ripple.id)) } /> ))} ); }; export default function AllButtons() { return (

); }