ben
bfcfc12f58
Protect recordings per user, seed a demo login on container start, and bind-mount the app with Vite HMR for local Compose development.
30 lines
1.4 KiB
PHP
30 lines
1.4 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 dark:border-zinc-700 dark:bg-zinc-800">
|
|
<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 dark:text-zinc-400">
|
|
<span class="font-medium text-stone-700 dark:text-zinc-200">Disk space</span>
|
|
<span class="tabular-nums">
|
|
{{ $disk['free_human'] }} free
|
|
<span class="text-stone-400 dark:text-zinc-500">·</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 dark:bg-zinc-700"
|
|
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>
|