49 lines
1.9 KiB
PHP
49 lines
1.9 KiB
PHP
@props([
|
|
'label',
|
|
// The figure, and the unit that follows it in lighter weight — "235" and
|
|
// "/ 500 GB" read as one measurement rather than as two numbers.
|
|
'value',
|
|
'unit' => null,
|
|
'foot' => null,
|
|
// A chevron to the page that explains the figure. Omitted where there is
|
|
// no such page: a chevron that goes nowhere is worse than none.
|
|
'href' => null,
|
|
])
|
|
{{--
|
|
One metric card, exactly as the approved template draws it: small caps
|
|
label with an optional chevron, the figure in tabular monospace with its
|
|
unit beside it, a line of context underneath, and the visual on the right.
|
|
|
|
The visual is a slot so the card does not have to know whether it is a
|
|
ring, a bar or a sparkline — and so a metric with nothing to draw simply
|
|
passes none instead of getting a decorative one.
|
|
--}}
|
|
<article {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface p-5 shadow-xs']) }}>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="font-mono text-[11px] uppercase tracking-[0.07em] text-muted">{{ $label }}</span>
|
|
@if ($href)
|
|
<a href="{{ $href }}" wire:navigate class="text-muted transition hover:text-ink" aria-label="{{ $label }}">
|
|
<x-ui.icon name="chevron-down" class="size-3.5 -rotate-90" />
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="mt-3 flex items-end justify-between gap-4">
|
|
<div class="min-w-0">
|
|
<p class="flex items-baseline gap-1.5 font-mono text-2xl font-semibold tracking-tight text-ink">
|
|
{{ $value }}
|
|
@if ($unit)<span class="text-sm font-normal text-muted">{{ $unit }}</span>@endif
|
|
</p>
|
|
@if ($foot)
|
|
<p class="mt-1.5 text-xs leading-snug text-muted">{{ $foot }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
@isset($visual)
|
|
<div class="shrink-0">{{ $visual }}</div>
|
|
@endisset
|
|
</div>
|
|
|
|
{{ $slot }}
|
|
</article>
|