Joseph.Rawlings
e7b33a2f6c
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
76 lines
3.0 KiB
PHP
76 lines
3.0 KiB
PHP
{{--
|
|
Stat Card Component - TailServer Theme
|
|
|
|
Usage:
|
|
<x-proxmox::ui.stat-card value="12" label="CPU %" />
|
|
<x-proxmox::ui.stat-card value="8.5" suffix="GB" label="Memory" icon="ri-database-2-line" />
|
|
<x-proxmox::ui.stat-card value="3" label="Servers" status="success" statusText="All active" />
|
|
--}}
|
|
|
|
@props([
|
|
'value',
|
|
'label',
|
|
'suffix' => null,
|
|
'prefix' => null,
|
|
'icon' => null,
|
|
'iconClass' => 'text-primary/30',
|
|
'status' => null,
|
|
'statusText' => null,
|
|
'href' => null,
|
|
'progress' => null,
|
|
'progressColor' => 'bg-primary',
|
|
'clickable' => false,
|
|
'compact' => false,
|
|
])
|
|
|
|
@php
|
|
$tag = $href ? 'a' : 'div';
|
|
$statusClasses = [
|
|
'success' => 'text-success bg-success/10',
|
|
'warning' => 'text-warning bg-warning/10',
|
|
'danger' => 'text-danger bg-danger/10',
|
|
'info' => 'text-info bg-info/10',
|
|
'muted' => 'text-base/50 bg-neutral/10',
|
|
];
|
|
$statusClass = $statusClasses[$status] ?? $statusClasses['muted'];
|
|
@endphp
|
|
|
|
<{{ $tag }}
|
|
@if($href) href="{{ $href }}" @endif
|
|
{{ $attributes->class([
|
|
'group relative flex flex-col rounded-xl border border-neutral/20 bg-background-secondary overflow-hidden',
|
|
'hover:bg-background-secondary/80 hover:border-neutral/30 hover:shadow-sm cursor-pointer transition-all duration-200' => $href || $clickable,
|
|
]) }}
|
|
>
|
|
{{-- Subtle gradient overlay --}}
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
|
|
|
|
<div @class(['relative flex grow items-center justify-between', 'p-5' => !$compact, 'p-4' => $compact])>
|
|
<dl class="min-w-0">
|
|
<dt @class(['font-bold text-base', 'text-2xl' => !$compact, 'text-xl' => $compact])>
|
|
@if($prefix)<span class="text-base/40">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span @class(['text-base/40', 'text-lg' => !$compact, 'text-base' => $compact])>{{ $suffix }}</span>@endif
|
|
</dt>
|
|
<dd @class(['font-medium text-base/50', 'text-sm' => !$compact, 'text-xs' => $compact])>{{ $label }}</dd>
|
|
</dl>
|
|
@if($icon)
|
|
<div @class(['flex items-center', $iconClass, 'opacity-60 group-hover:opacity-80 transition-opacity'])>
|
|
<x-dynamic-component :component="$icon" @class(['size-10' => !$compact, 'size-8' => $compact]) />
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if($progress !== null)
|
|
<div class="px-5 pb-4">
|
|
<div class="h-1.5 w-full rounded-full bg-neutral/10 overflow-hidden">
|
|
<div class="h-full {{ $progressColor }} rounded-full transition-all duration-500" style="width: {{ min(100, $progress) }}%"></div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($statusText)
|
|
<div class="border-t border-neutral/20 px-5 py-2.5 text-xs font-semibold {{ $statusClass }}">
|
|
{{ $statusText }}
|
|
</div>
|
|
@endif
|
|
</{{ $tag }}>
|