clerk-otp

1"use client"
2 
3import { useEffect, useState } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8const generateRandomDigits = () => {
9  return Array.from({ length: 6 }, () =>
10    Math.floor(Math.random() * 10).toString()
11  )
12}
13 
14type AnimatedOTPProps = {
15  delay?: number
16  cardTitle?: string
17  cardDescription?: string
18  whileHover?: boolean
19}
20 
21const AnimatedOTP = ({
22  delay = 3500,
23  cardTitle = "Multifactor Authentication",
24  cardDescription = "Each user's self-serve multifactor settings are enforced automatically during sign-in.",
25  whileHover = false,
26}: AnimatedOTPProps) => {
27  const [animationKey, setAnimationKey] = useState(0)
28  const delayTime = Math.max(delay, 3500)
29  useEffect(() => {
30    const interval = setInterval(() => {
31      setAnimationKey((prev) => prev + 1)
32    }, delayTime)
33 
34    return () => clearInterval(interval)
35  }, [delayTime])
36 
37  return (
38    <OTPinput
39      key={animationKey}
40      cardTitle={cardTitle}
41      cardDescription={cardDescription}
42      whileHover={whileHover}
43    />
44  )
45}
46 
47export default AnimatedOTP
48 
49const OTPinput = ({
50  cardTitle,
51  cardDescription,
52  whileHover,
53}: AnimatedOTPProps) => {
54  const [activeIndex, setActiveIndex] = useState(0)
55  const [fadeOut, setFadeOut] = useState(false)
56  const [digits] = useState(() => generateRandomDigits())
57  const [isCardHovered, setIsCardHovered] = useState(false)
58 
59  useEffect(() => {
60    if (activeIndex > digits.length - 1) return
61 
62    const shouldAnimate = !whileHover || (whileHover && isCardHovered)
63 
64    if (!shouldAnimate) return
65 
66    const interval = setInterval(() => {
67      setActiveIndex((prev) => prev + 1)
68    }, 400)
69 
70    if (activeIndex === digits.length - 1) {
71      setTimeout(() => {
72        setFadeOut(true)
73      }, 450)
74    }
75 
76    return () => clearInterval(interval)
77  }, [activeIndex, digits.length, whileHover, isCardHovered])
78 
79  return (
80    <motion.div
81      initial={{ opacity: 1 }}
82      onHoverStart={() => setIsCardHovered(true)}
83      onHoverEnd={() => setIsCardHovered(false)}
84      className={cn(
85        "relative",
86        "flex items-center justify-center",
87        "h-[14rem] w-full max-w-[350px]",
88        "rounded-md border bg-neutral-50 dark:bg-neutral-900",
89        "shadow-[0_3px_10px_rgb(0,0,0,0.2)]"
90      )}
91    >
92      <div className="absolute top-[25%] left-1/2 -translate-x-1/2">
93        <div className="flex w-full items-center justify-center gap-3">
94          {digits.map((digit, idx) => (
95            <div
96// … truncated