Forge Resource Meter code

@props([
    'label',
    'value' => null,
    'detail' => null,
    'percent' => null,
    'variant' => 'brand',
    'icon' => null,
])

@php
    /*
    | Compact infrastructure meter for CPU, memory, disk and bandwidth readings.
    | The explicit variant map keeps Tailwind classes discoverable while still
    | letting server dashboards communicate severity through colour.
    |
    | Usage:
    |   <x-ui.forge-resource-meter label="CPU" value="38%" :percent="38" icon="cpu" />
    */
    $variantClasses = [
        'brand' => 'bg-brand-600 dark:bg-brand-500',
        'green' => 'bg-green-600 dark:bg-green-500',
        'amber' => 'bg-amber-500 dark:bg-amber-400',
        'red' => 'bg-red-600 dark:bg-red-500',
        'blue' => 'bg-accent-600 dark:bg-accent-500',
        'gray' => 'bg-gray-500 dark:bg-gray-400',
    ];

    $barClass = $variantClasses[$variant] ?? $variantClasses['brand'];
    $meterPercent = $percent === null ? null : max(0, min(100, (int) $percent));
@endphp

<div {{ $attributes->merge(['class' => 'min-w-0 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900']) }}>
    <div class="flex min-w-0 flex-col gap-1.5 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
        <div class="flex min-w-0 items-center gap-2">
            @if ($icon)
                <x-ui.icon :name="$icon" size="sm" class="shrink-0 text-gray-400 dark:text-gray-500" />
            @endif
            <p class="truncate text-sm font-medium text-gray-600 dark:text-gray-300">{{ $label }}</p>
        </div>

        @if ($value)
            <p class="w-fit text-sm font-semibold tabular-nums text-gray-900 dark:text-white sm:shrink-0">{{ $value }}</p>
        @endif
    </div>

    @if ($meterPercent !== null)
        <div class="mt-3 h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ $meterPercent }}" aria-label="{{ $label }}">
            <div class="h-full rounded-full {{ $barClass }}" style="width: {{ $meterPercent }}%"></div>
        </div>
    @endif

    @if ($detail)
        <p class="mt-2 truncate text-xs text-gray-500 dark:text-gray-400">{{ $detail }}</p>
    @endif
</div>