isaaccladandCursor
76241ac2b5
Deploy Ladill Care / deploy (push) Successful in 56s
Hero cards now show patient/appointment/lab counts instead of long currency strings, and page-hero values truncate safely for large figures. Co-authored-by: Cursor <cursoragent@cursor.com>
40 lines
2.1 KiB
PHP
40 lines
2.1 KiB
PHP
@props([
|
|
'badge',
|
|
'title',
|
|
'description' => null,
|
|
'stats' => [],
|
|
])
|
|
|
|
<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 sm:grid-cols-3 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 flex w-[8.5rem] shrink-0 snap-start flex-col justify-center rounded-xl border border-slate-200 bg-white/90 px-3 py-3 text-center backdrop-blur-sm sm:w-auto sm:min-w-0">
|
|
<p class="truncate text-lg font-bold tabular-nums text-slate-900 sm:text-xl" title="{{ $stat['value'] }}">{{ $stat['value'] }}</p>
|
|
<p class="mt-0.5 truncate text-[11px] font-medium text-slate-500" title="{{ $stat['label'] }}">{{ $stat['label'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|