ben
352b564f3a
Implement DiskSpaceService to provide snapshots of disk space usage, including total, free, and used bytes, as well as human-readable formats. Create DiskSpaceBar component to display disk usage information in the UI, including a progress bar that visually represents used space. Update app layout to include the DiskSpaceBar and add tests to ensure functionality of the disk space service and its integration in the layout.
30 lines
1.3 KiB
PHP
30 lines
1.3 KiB
PHP
@php
|
|
/** @var array{used_percent: float, free_percent: float, free_human: string, total_human: string, used_human: string} $disk */
|
|
@endphp
|
|
<div class="border-b border-stone-200 bg-white">
|
|
<div class="mx-auto max-w-5xl px-4 py-2 sm:px-6">
|
|
<div class="flex items-center justify-between gap-3 text-xs text-stone-600">
|
|
<span class="font-medium text-stone-700">Disk space</span>
|
|
<span class="tabular-nums">
|
|
{{ $disk['free_human'] }} free
|
|
<span class="text-stone-400">·</span>
|
|
{{ $disk['used_percent'] }}% used of {{ $disk['total_human'] }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-stone-200"
|
|
role="progressbar"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-valuenow="{{ (int) round($disk['used_percent']) }}"
|
|
aria-label="Disk space used"
|
|
title="{{ $disk['free_human'] }} free of {{ $disk['total_human'] }}"
|
|
>
|
|
<div
|
|
class="h-full rounded-full transition-[width] duration-300 {{ $barColor }}"
|
|
style="width: {{ min(100, max(0, $disk['used_percent'])) }}%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|