import { cn } from "@/lib/utils" import { useEffect, useState } from "react" export default function AnimateCountClient({ count, className, minDigits, }: { count: number className?: string minDigits?: number }) { const [previousCount, setPreviousCount] = useState(count) useEffect(() => { if (count !== previousCount) { setTimeout(() => { setPreviousCount(count) }, 300) } }, [count]) return ( {count} ) } export function AnimateCount({ children: count, className, preCount, minDigits = 1, ...props }: { children: number className?: string preCount?: number minDigits?: number }) { const currentDigits = count.toString().split("") const previousDigits = ( preCount !== undefined ? preCount.toString() : count - 1 >= 0 ? (count - 1).toString() : "0" ).split("") // Ensure both numbers meet the minimum length requirement and maintain the same length for animation const maxLength = Math.max(previousDigits.length, currentDigits.length, minDigits) while (previousDigits.length < maxLength) { previousDigits.unshift("0") } while (currentDigits.length < maxLength) { currentDigits.unshift("0") } return (
{currentDigits.map((digit, index) => { const hasChanged = digit !== previousDigits[index] return (
{previousDigits[index]}
{digit}
) })}
) }