Stat Band Animated code

@props([
    'stats' => [],
    'duration' => 1600,
])

@php
    /*
    | Animated clone of <x-ui.stat-band>. Same hairline-separated band of
    | headline metrics, but each value counts up from zero when the band first
    | scrolls into view. Pass `stats` as ['value' => '99.9%', 'label' => 'Uptime'].
    |
    | Usage:
    |   <x-ui.stat-band-animated :stats="[
    |       ['value' => '44', 'label' => 'Components'],
    |       ['value' => '99.9%', 'label' => 'Uptime'],
    |   ]" />
    */
    $cols = [
        1 => 'lg:grid-cols-1', 2 => 'lg:grid-cols-2', 3 => 'lg:grid-cols-3',
        4 => 'lg:grid-cols-4', 5 => 'lg:grid-cols-5', 6 => 'lg:grid-cols-6',
    ][count($stats)] ?? 'lg:grid-cols-4';
@endphp

<dl {{ $attributes->merge(['class' => 'grid grid-cols-2 gap-px overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 '.$cols]) }}>
    @foreach ($stats as $stat)
        <div class="flex flex-col items-center justify-center gap-1 bg-white dark:bg-gray-950 px-6 py-10 text-center">
            <dt class="order-2 text-sm font-medium text-gray-500 dark:text-gray-400">{{ $stat['label'] }}</dt>
            <dd class="order-1">
                <span
                    x-data="countUp(@js((string) $stat['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"
                >{{ $stat['value'] }}</span>
            </dd>
        </div>
    @endforeach
</dl>