homeos/resources/views/components/kpi.blade.php

23 lines
967 B
PHP

@props(['label', 'value', 'unit' => null, 'meta' => null, 'icon' => null, 'warnEdge' => false])
<div {{ $attributes->merge(['class' => 'relative overflow-hidden bg-surface border border-line-soft rounded-card px-4 py-[14px] flex flex-col gap-1.5 transition-colors hover:border-line']) }}>
@if ($warnEdge)
<span class="absolute inset-y-0 left-0 w-[3px] bg-warning"></span>
@endif
<div class="flex items-center gap-[7px] text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">
@if ($icon)
<x-icon :name="$icon" :size="13" />
@endif
<span>{{ $label }}</span>
</div>
<div class="font-mono text-2xl font-extrabold tracking-[-0.02em] tabular-nums text-ink leading-none">
{{ $value }}@if ($unit)<small class="ml-1 text-[13px] font-semibold text-ink-3">{{ $unit }}</small>@endif
</div>
@if ($meta)
<div class="text-[11.5px] text-ink-3">{{ $meta }}</div>
@endif
</div>