Neura UI

{{--
    Stat row — four-up metric strip for application dashboards.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-12">
        <dl class="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-dashed border-edge bg-edge lg:grid-cols-4">
            @foreach ([
                ['label' => __('MRR'), 'value' => '€24.8k', 'delta' => '+8.2%', 'up' => true],
                ['label' => __('Active users'), 'value' => '12,904', 'delta' => '+3.1%', 'up' => true],
                ['label' => __('Conversion'), 'value' => '4.6%', 'delta' => '-0.4%', 'up' => false],
                ['label' => __('NPS'), 'value' => '62', 'delta' => '+5', 'up' => true],
            ] as $stat)
                <div class="bg-surface px-5 py-6 sm:px-6">
                    <dt class="font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">
                        {{ $stat['label'] }}
                    </dt>
                    <dd class="mt-2 flex items-end justify-between gap-3">
                        <span class="text-2xl font-semibold tabular-nums tracking-tight text-fg sm:text-3xl">
                            {{ $stat['value'] }}
                        </span>
                        <span @class([
                            'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-[11px]',
                            'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' => $stat['up'],
                            'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400' => ! $stat['up'],
                        ])>
                            <neura::icon :name="$stat['up'] ? 'arrow-trending-up' : 'arrow-trending-down'"
                                class="size-3.5" />
                            {{ $stat['delta'] }}
                        </span>
                    </dd>
                </div>
            @endforeach
        </dl>
    </neura::container>
</section>