Animated Checkmark

"use client"; /** * @author: @dorian_baffier * @description: Currency Transfer * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://clumpui.amardeep.space * @github: https://github.com/kokonut-labs/kokonutui */ import { motion, AnimatePresence } from "motion/react"; import { Card, CardContent } from "@/components/ui/card"; import { ArrowUpIcon, ArrowDownIcon, InfoIcon, ArrowUpDown, Check, } from "lucide-react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { useState, useEffect } from "react"; import { cn } from "@/lib/utils"; interface CheckmarkProps { size?: number; strokeWidth?: number; color?: string; className?: string; } const draw = { hidden: { pathLength: 0, opacity: 0 }, visible: (i: number) => ({ pathLength: 1, opacity: 1, transition: { pathLength: { delay: i * 0.2, type: "spring", duration: 1.5, bounce: 0.2, ease: [0.22, 1, 0.36, 1], }, opacity: { delay: i * 0.2, duration: 0.3 }, }, }), }; export function Checkmark({ size = 100, strokeWidth = 2, color = "currentColor", className = "", }: CheckmarkProps) { return ( Animated Checkmark ); } export default function CurrencyTransfer() { const [isCompleted, setIsCompleted] = useState(false); const timestamp = new Date().toLocaleString(); const transactionId = `TXN-${Math.random() .toString(36) .substr(2, 9) .toUpperCase()}`; useEffect(() => { const timer = setTimeout(() => { setIsCompleted(true); }, 1500); return () => clearTimeout(timer); }, []); return (

{!isCompleted ? (

) : (

)}

{isCompleted ? ( Transfer Completed ) : ( Transfer in Progress )} {isCompleted ? ( Transaction ID: {transactionId} ) : ( Processing Transaction... )}

From

500.00 USD Chase Bank ••••4589

€

460.00 EUR Deutsche Bank ••••7823

{isCompleted ? ( Exchange Rate: 1 USD = 0.92 EUR ) : ( Calculating exchange rate... )}

{isCompleted ? `Rate updated at ${timestamp}` : "Please wait..."}

); }