Animated Checkmark

"use client"; /** * @author: @dorianbaffier * @description: Currency Transfer * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowDownIcon, ArrowUpDown, ArrowUpIcon, Check, InfoIcon, } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import { useEffect, useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; 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 transactionId = "TXN-DAB3UL494"; 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 10:45 AM" : "Please wait..."}

); }

Currency Transfer

Instalação

Dependências

Registry dependencies