@php
    /** @var array{used_percent: float, free_percent: float, free_human: string, total_human: string, used_human: string} $disk */
@endphp
<div
    class="flex items-center gap-2 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'] }} · {{ $disk['used_percent'] }}% used"
>
    <div
        class="h-1.5 w-14 shrink-0 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
        role="progressbar"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-valuenow="{{ (int) round($disk['used_percent']) }}"
        aria-label="Disk space used"
    >
        <div
            class="h-full rounded-full transition-[width] duration-300 {{ $barColor }}"
            style="width: {{ min(100, max(0, $disk['used_percent'])) }}%"
        ></div>
    </div>
    <span class="hidden text-xs font-medium tabular-nums text-zinc-600 sm:inline dark:text-zinc-300">
        {{ $disk['free_human'] }} free
    </span>
</div>