Counter code

@props([
    'value' => '0',
    'label' => null,
    'duration' => 1600,
])

@php
    /*
    | Animated metric that counts up from zero to `value` the first time it
    | scrolls into view. The display string is parsed so currency symbols,
    | percentages and thousands separators are preserved (e.g. "$48.2k",
    | "12,840", "99.9%"). Honours `prefers-reduced-motion`.
    |
    | Usage:
    |   <x-ui.counter value="12,840" label="Active users" />
    |   <x-ui.counter value="$48.2k" label="Revenue" :duration="2000" />
    */
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center gap-1 text-center']) }}>
    <span
        x-data="countUp(@js((string) $value), { duration: {{ (int) $duration }} })"
        x-text="display"
        class="text-4xl sm:text-5xl font-semibold tracking-tight text-gray-900 dark:text-white tabular-nums"
    >{{ $value }}</span>
    @if ($label)
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $label }}</span>
    @endif
</div>