30 lines
1.1 KiB
PHP
30 lines
1.1 KiB
PHP
@props([
|
|
'label',
|
|
'value',
|
|
'unit' => null,
|
|
'percent' => null, // 0..100 → renders a bar
|
|
'tone' => 'accent', // accent | success | warning | danger
|
|
])
|
|
@php
|
|
$bar = [
|
|
'accent' => 'bg-accent',
|
|
'success' => 'bg-success',
|
|
'warning' => 'bg-warning',
|
|
'danger' => 'bg-danger',
|
|
][$tone] ?? 'bg-accent';
|
|
$pct = is_null($percent) ? null : max(0, min(100, (int) $percent));
|
|
@endphp
|
|
<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface p-4 shadow-xs']) }}>
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-faint">{{ $label }}</p>
|
|
<p class="mt-1 flex items-baseline gap-1">
|
|
<span class="font-mono text-2xl font-semibold text-ink">{{ $value }}</span>
|
|
@if ($unit)<span class="text-sm text-muted">{{ $unit }}</span>@endif
|
|
</p>
|
|
@if (! is_null($pct))
|
|
<div class="mt-3 h-1.5 w-full overflow-hidden rounded-pill bg-surface-2">
|
|
{{-- the one allowed inline style: dynamic progress width (R4) --}}
|
|
<div class="h-full rounded-pill {{ $bar }}" style="width: {{ $pct }}%"></div>
|
|
</div>
|
|
@endif
|
|
</div>
|