Delete Button

1"use client";
2 
3import { Undo03Icon } from "@hugeicons/core-free-icons";
4import { HugeiconsIcon } from "@hugeicons/react";
5import { motion, AnimatePresence } from "motion/react";
6import React, { useEffect, useState } from "react";
7 
8const DeleteButton = () => {
9  const [isDeleting, setIsDeleting] = useState(false);
10  const [count, setCount] = useState(10);
11  const [isAnimating, setIsAnimating] = useState(false);
12 
13  useEffect(() => {
14    if (!isDeleting) return;
15 
16    if (count === 0) return;
17 
18    const timer = setTimeout(() => setCount((c) => c - 1), 1000);
19    return () => clearTimeout(timer);
20  }, [isDeleting, count]);
21 
22  const handleClick = (newState: boolean) => {
23    if (isAnimating) return;
24    setIsAnimating(true);
25    setIsDeleting(newState);
26    if (newState) setCount(10);
27 
28    // Release lock after animation completes
29    setTimeout(() => setIsAnimating(false), 400);
30  };
31 
32  // Change Here
33  const deleteText = "Delete Account";
34  const cancelText = "Cancel Deletion";
35 
36  return (
37    <div className="flex items-center justify-center">
38      <AnimatePresence mode="popLayout" initial={false}>
39        {!isDeleting ? (
40          // STATE A
41          <motion.button
42            key="delete"
43            layoutId="deleteButton"
44            onClick={() => handleClick(true)}
45            whileTap={{ scale: 0.95 }}
46            style={{ pointerEvents: isAnimating ? "none" : "auto" }}
47            initial={{
48              backgroundColor: "#FFEDF1",
49              filter: "blur(1px)",
50              opacity: 1,
51            }}
52            animate={{
53              backgroundColor: "#FE322A",
54              filter: "blur(0px)",
55              opacity: 1,
56            }}
57            exit={{
58              backgroundColor: "#FFEDF1",
59              filter: "blur(1px)",
60              opacity: 0,
61            }}
62            className="text-white px-5 py-3 rounded-full flex items-center justify-center overflow-hidden"
63            transition={{
64              layout: { duration: 0.4, ease: [0.77, 0, 0.175, 1] },
65              backgroundColor: { duration: 0.4, ease: "easeInOut" },
66              filter: { duration: 0.1, ease: "easeInOut" },
67              opacity: { duration: 0.2, ease: "easeOut" },
68            }}
69          >
70            <motion.span
71              layoutId="buttonText"
72              className="flex"
73              initial={{ opacity: 0 }}
74              animate={{ opacity: 1 }}
75              exit={{ opacity: 0 }}
76              transition={{ duration: 0.1 }}
77            >
78// … truncated