"use client"; import { Undo03Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useDialKit } from "dialkit"; import { motion, AnimatePresence } from "motion/react"; import React, { useEffect, useState } from "react"; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (digit) => FA_DIGITS[Number(digit)] ?? digit); } /** Word tokens — never split Persian letters (breaks joining). */ function splitLabel(text: string) { return text.split(/(\s+)/).filter((part) => part.length > 0); } export const dialConfig = { deleteText: "حذف حساب", cancelText: "لغو حذف", countdown: [10, 3, 20, 1], deleteColor: "#FE322A", softColor: "#FFEDF1", layout: { type: "easing", duration: 0.4, ease: [0.77, 0, 0.175, 1], }, char: { type: "easing", duration: 0.3, ease: [0.785, 0.135, 0.15, 0.86], }, } as const; type DeleteParams = { deleteText: string; cancelText: string; countdown: number; deleteColor: string; softColor: string; layout: typeof dialConfig.layout; char: typeof dialConfig.char; }; const DeleteButton = () => { const params = useDialKit("Delete Button", dialConfig as never) as DeleteParams; const [isDeleting, setIsDeleting] = useState(false); const [count, setCount] = useState(params.countdown); const [isAnimating, setIsAnimating] = useState(false); useEffect(() => { if (!isDeleting) return; if (count === 0) return; const timer = setTimeout(() => setCount((c) => c - 1), 1000); return () => clearTimeout(timer); }, [isDeleting, count]); const handleClick = (newState: boolean) => { if (isAnimating) return; setIsAnimating(true); setIsDeleting(newState); if (newState) setCount(params.countdown); setTimeout(() => setIsAnimating(false), params.layout.duration * 1000); }; const deleteText = params.deleteText; const cancelText = params.cancelText; return (

{!isDeleting ? ( handleClick(true)} whileTap={{ scale: 0.95 }} style={{ pointerEvents: isAnimating ? "none" : "auto" }} initial={{ backgroundColor: params.softColor, filter: "blur(1px)", opacity: 1, }} animate={{ backgroundColor: params.deleteColor, filter: "blur(0px)", opacity: 1, }} exit={{ backgroundColor: params.softColor, filter: "blur(1px)", opacity: 0, }} className="flex items-center justify-center overflow-hidden rounded-full px-5 py-3 text-white" transition={{ layout: { duration: params.layout.duration, ease: [...params.layout.ease] }, backgroundColor: { duration: 0.4, ease: "easeInOut" }, filter: { duration: 0.1, ease: "easeInOut" }, opacity: { duration: 0.2, ease: "easeOut" }, }} > {splitLabel(deleteText).map((part, i) => ( {part} ))} ) : ( handleClick(false)} whileTap={{ scale: 0.95 }} style={{ pointerEvents: isAnimating ? "none" : "auto" }} initial={{ backgroundColor: params.deleteColor, filter: "blur(1px)", opacity: 0, }} animate={{ backgroundColor: params.softColor, filter: "blur(0px)", opacity: 1, }} exit={{ backgroundColor: params.deleteColor, filter: "blur(1px)", opacity: 0, }} className="flex items-center gap-2 overflow-hidden rounded-full px-3 py-3" transition={{ layout: { duration: params.layout.duration, ease: [...params.layout.ease] }, backgroundColor: { duration: 0.4, ease: "easeInOut" }, filter: { duration: 0.2, ease: "easeInOut" }, opacity: { duration: 0.2, ease: "easeIn" }, }} > {splitLabel(cancelText).map((part, i) => ( {part} ))} {toFaDigits(count)} )}

); }; export default DeleteButton;