ben
b3fb74fb1b
Use an inline-colored full-width progress bar so the fill renders without relying on purged Tailwind classes.
34 lines
1.5 KiB
PHP
34 lines
1.5 KiB
PHP
@php
|
|
/** @var array{used_percent: float, free_percent: float, free_human: string, total_human: string, used_human: string} $disk */
|
|
$usedPercent = min(100, max(0, (float) $disk['used_percent']));
|
|
$usedPercentLabel = rtrim(rtrim(number_format($usedPercent, 1, '.', ''), '0'), '.') ?: '0';
|
|
$freePercent = (float) ($disk['free_percent'] ?? 100);
|
|
// Inline colors so the fill is visible even before / without a Tailwind rebuild.
|
|
$fillColor = match (true) {
|
|
$freePercent <= 5 => '#dc2626',
|
|
$freePercent <= 15 => '#f59e0b',
|
|
default => '#0d9488',
|
|
};
|
|
@endphp
|
|
<div
|
|
class="flex min-w-36 flex-col gap-1 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1.5 dark:border-zinc-600 dark:bg-zinc-900/50"
|
|
title="{{ $disk['free_human'] }} free of {{ $disk['total_human'] }} · {{ $usedPercentLabel }}% used"
|
|
>
|
|
<div
|
|
class="h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
|
|
role="progressbar"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-valuenow="{{ (int) round($usedPercent) }}"
|
|
aria-label="Disk space {{ $usedPercentLabel }}% used"
|
|
>
|
|
<div
|
|
class="h-full rounded-full transition-[width] duration-300"
|
|
style="width: {{ $usedPercent }}%; background-color: {{ $fillColor }};"
|
|
></div>
|
|
</div>
|
|
<span class="text-xs font-medium tabular-nums text-zinc-600 dark:text-zinc-300">
|
|
{{ $usedPercentLabel }}% used · {{ $disk['free_human'] }} free
|
|
</span>
|
|
</div>
|