Onboard Card

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion } from "motion/react";
5import { LuLoader } from "react-icons/lu";
6import { useEffect, useState } from "react";
7import { IoMdCheckmark } from "react-icons/io";
8 
9interface OnboardCardProps {
10  duration?: number;
11  step1?: string;
12  step2?: string;
13  step3?: string;
14}
15 
16const OnboardCard = ({
17  duration = 3000,
18  step1 = "Welcome Aboard",
19  step2 = "Verifying Details",
20  step3 = "Account Created",
21}: OnboardCardProps) => {
22  const [progress, setProgress] = useState(0);
23  const [animateKey, setAnimateKey] = useState(0);
24 
25  useEffect(() => {
26    const forward = setTimeout(() => setProgress(100), 100);
27    const reset = setTimeout(() => {
28      setAnimateKey((k) => k + 1);
29    }, duration + 2000);
30 
31    return () => {
32      clearTimeout(forward);
33      clearTimeout(reset);
34    };
35  }, [animateKey, duration]);
36 
37  return (
38    <div
39      className={cn(
40        "relative",
41        "flex flex-col items-center justify-center gap-1 p-1",
42      )}
43    >
44      <div className="flex min-w-62.5 scale-[0.9] flex-col justify-center gap-2 rounded-md border bg-linear-to-br from-neutral-100 to-neutral-50 py-2 pr-16 pl-3 opacity-80 dark:from-neutral-800 dark:to-neutral-950">
45        <div className="text-primary flex items-center justify-start gap-2 text-xs">
46          <div>
47            <LuLoader />
48          </div>
49          <div>{step3}</div>
50        </div>
51        <div
52          className={`ml-5 h-1.5 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700`}
53        ></div>
54      </div>
55      <div className="flex min-w-62.5 flex-col justify-center gap-2 rounded-md border bg-linear-to-br from-neutral-100 to-neutral-50 py-2 pr-16 pl-3 dark:from-neutral-800 dark:to-neutral-950">
56        <div className="text-primary flex items-center justify-start gap-1.5 text-xs">
57          <div className="animate-spin">
58            <LuLoader />
59          </div>
60          <div>{step2}</div>
61        </div>
62        <div
63          className={`ml-5 h-1.5 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700`}
64        >
65          <motion.div
66            key={animateKey}
67            className="h-full bg-green-500"
68            initial={{ width: 0 }}
69            animate={{ width: `${progress}%` }}
70            transition={{ duration: duration / 1000, ease: "easeInOut" }}
71          />
72        </div>
73      </div>
74// … truncated