Animated Button

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { AnimatePresence, motion } from "motion/react"
5import { useEffect, useRef, useState } from "react"
6 
7export function AnimatedButton({
8  children,
9  secondaryChildren,
10  className,
11  onClick,
12  ariaLabel,
13  showingSecondary,
14  timeout = 1000,
15}: {
16  children: React.ReactNode
17  secondaryChildren?: React.ReactNode
18  className?: string
19  onClick?: () => void
20  ariaLabel: string
21  showingSecondary?: boolean
22  timeout?: number
23}) {
24  const [isShowingSecondary, setIsShowingSecondary] = useState(false)
25  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
26  const isControlled = showingSecondary !== undefined
27 
28  useEffect(() => {
29    return () => {
30      if (timeoutRef.current) {
31        clearTimeout(timeoutRef.current)
32      }
33    }
34  }, [])
35 
36  const shouldShowSecondary =
37    Boolean(secondaryChildren) && (isControlled ? Boolean(showingSecondary) : isShowingSecondary)
38 
39  return (
40    <motion.button
41      whileTap={{ scale: 0.95 }}
42      tabIndex={0}
43      aria-label={ariaLabel}
44      className={cn("group flex shrink-0 cursor-pointer items-center justify-center", className)}
45      onClick={() => {
46        if (shouldShowSecondary) return
47 
48        onClick?.()
49 
50        if (secondaryChildren && !isControlled) {
51          if (timeoutRef.current) {
52            clearTimeout(timeoutRef.current)
53          }
54          setIsShowingSecondary(true)
55          timeoutRef.current = setTimeout(() => {
56            setIsShowingSecondary(false)
57          }, timeout)
58        }
59      }}
60    >
61      <AnimatePresence mode="popLayout" initial={false}>
62        <motion.div
63          key={shouldShowSecondary ? "secondary" : "primary"}
64          initial={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
65          animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
66          exit={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
67          transition={{
68            type: "spring",
69            duration: 0.3,
70            bounce: 0,
71          }}
72          className="grid place-content-center"
73        >
74          {shouldShowSecondary ? secondaryChildren : children}
75        </motion.div>
76      </AnimatePresence>
77    </motion.button>
78  )
79}