31 lines
1.4 KiB
PHP
31 lines
1.4 KiB
PHP
@props(['label', 'value', 'unit' => null, 'tone' => 'ink', 'icon' => null, 'pct' => null])
|
|
@php
|
|
$valueColor = [
|
|
'ink' => 'text-ink', 'online' => 'text-online', 'warning' => 'text-warning',
|
|
'offline' => 'text-offline', 'accent' => 'text-accent-text', 'cyan' => 'text-cyan-bright',
|
|
][$tone] ?? 'text-ink';
|
|
$barColor = [
|
|
'ink' => 'bg-accent', 'online' => 'bg-online', 'warning' => 'bg-warning',
|
|
'offline' => 'bg-offline', 'accent' => 'bg-accent', 'cyan' => 'bg-cyan',
|
|
][$tone] ?? 'bg-accent';
|
|
@endphp
|
|
<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface p-4 shadow-panel']) }}>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<p class="font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ $label }}</p>
|
|
@if ($icon)
|
|
<x-icon :name="$icon" class="h-4 w-4 text-ink-4" />
|
|
@endif
|
|
</div>
|
|
<p class="mt-2 flex items-baseline gap-1">
|
|
<span class="tabular font-mono text-2xl font-semibold {{ $valueColor }}">{{ $value }}</span>
|
|
@if ($unit)
|
|
<span class="font-mono text-xs text-ink-3">{{ $unit }}</span>
|
|
@endif
|
|
</p>
|
|
@if (! is_null($pct))
|
|
<div class="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-inset">
|
|
<div class="h-full rounded-full {{ $barColor }}" style="width: {{ $pct }}%"></div>
|
|
</div>
|
|
@endif
|
|
</div>
|