isaaccladandCursor
b6defa5e47
Deploy Ladill Servers / deploy (push) Successful in 1m49s
Surface server counts, status breakdown, and available plans in heroes consistent with other Ladill apps. Co-authored-by: Cursor <cursoragent@cursor.com>
48 lines
2.1 KiB
PHP
48 lines
2.1 KiB
PHP
@props([
|
|
'badge',
|
|
'title',
|
|
'description' => null,
|
|
'stats' => [],
|
|
])
|
|
|
|
@php
|
|
$statCols = match (count($stats)) {
|
|
4 => 'sm:grid-cols-2 lg:grid-cols-4',
|
|
2 => 'sm:grid-cols-2',
|
|
default => 'sm:grid-cols-3',
|
|
};
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white']) }}>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-violet-50/60"></div>
|
|
<div class="relative px-6 py-8 sm:px-10">
|
|
<div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="max-w-xl">
|
|
<div class="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">
|
|
{{ $badge }}
|
|
</div>
|
|
<h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">{{ $title }}</h1>
|
|
@if ($description)
|
|
<p class="mt-2 text-sm leading-6 text-slate-600">{{ $description }}</p>
|
|
@endif
|
|
@isset($actions)
|
|
<div class="mt-6 flex flex-wrap items-center gap-2">
|
|
{{ $actions }}
|
|
</div>
|
|
@endisset
|
|
</div>
|
|
|
|
@if (count($stats) > 0)
|
|
<div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid {{ $statCols }} sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
|
|
@foreach ($stats as $stat)
|
|
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
|
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $stat['value'] }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">{{ $stat['label'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|