Stat Band code

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

@php
    /*
    | Horizontal band of large headline metrics, separated by hairlines.
    | Pass `stats` as an array of ['value' => '99.9%', 'label' => 'Uptime'].
    |
    | Usage:
    |   <x-ui.stat-band :stats="[
    |       ['value' => '970k', 'label' => 'Servers'],
    |       ['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 text-4xl sm:text-5xl font-semibold tracking-tight text-gray-900 dark:text-white tabular-nums">{{ $stat['value'] }}</dd>
        </div>
    @endforeach
</dl>