Status Button

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { cn } from "@/lib/utils";
5import { motion, AnimatePresence } from "motion/react";
6import { Tick02Icon } from "@hugeicons/core-free-icons";
7import { HugeiconsIcon } from "@hugeicons/react";
8import { useMemo, useState } from "react";
9 
10export function SaveButton() {
11  const [status, setStatus] = useState<"idle" | "loading" | "success">("idle");
12 
13  const handleClick = () => {
14    setStatus("loading");
15    setTimeout(() => {
16      setStatus("success");
17      setTimeout(() => {
18        setStatus("idle");
19      }, 2000);
20    }, 2500);
21  };
22 
23  const text = useMemo(() => {
24    switch (status) {
25      case "idle":
26        return "Save";
27      case "loading":
28        return "Saving";
29      case "success":
30        return "Saved";
31    }
32  }, [status]);
33 
34  return (
35    <div className="relative inline-flex group font-sans">
36      <Button
37        onClick={handleClick}
38        className={cn(
39          "relative rounded-full h-12 px-8 text-base font-medium transition-all duration-300 min-w-[140px] disabled:opacity-100",
40          status === "idle"
41            ? "transition-colors"
42            : "bg-muted text-muted-foreground hover:bg-muted cursor-not-allowed border-muted shadow-sm"
43        )}
44        variant={"default"}
45        disabled={status !== "idle"}
46      >
47        <span className="flex items-center justify-center">
48          <AnimatePresence mode="popLayout" initial={false}>
49            {text.split("").map((char, i) => (
50              <motion.span
51                key={`${char}-${i}`}
52                layout
53                initial={{ opacity: 0, scale: 0, filter: "blur(4px)" }}
54                animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
55                exit={{ opacity: 0, scale: 0, filter: "blur(4px)" }}
56                transition={{
57                  type: "spring",
58                  stiffness: 500,
59                  damping: 30,
60                  mass: 1,
61                }}
62                className="inline-block"
63              >
64                {char}
65              </motion.span>
66            ))}
67          </AnimatePresence>
68        </span>
69      </Button>
70 
71      {/* Status Indicator */}
72      <div className={cn("absolute -top-1 -right-1 z-10 pointer-events-none")}>
73        <AnimatePresence mode="wait">
74          {status !== "idle" && (
75            <motion.div
76              initial={{ opacity: 0, scale: 0, x: -8, filter: "blur(4px)" }}
77// … truncated