Joseph.Rawlings
b4e2923a2c
- Changed component styles and classes to align with TailAdmin design patterns. - Updated color schemes, typography, and layout for consistency across components. - Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components. - Enhanced responsiveness and accessibility features in various components.
102 lines
3.5 KiB
PHP
102 lines
3.5 KiB
PHP
{{--
|
|
Resource Gauge Component - TailAdmin style
|
|
Shows a circular or linear gauge for resource usage
|
|
|
|
Usage:
|
|
<x-proxmox::ui.resource-gauge :value="75" label="CPU" />
|
|
<x-proxmox::ui.resource-gauge :value="45" label="Memory" :max="100" suffix="%" />
|
|
--}}
|
|
|
|
@props([
|
|
'value' => 0,
|
|
'max' => 100,
|
|
'label',
|
|
'sublabel' => null,
|
|
'suffix' => '%',
|
|
'prefix' => null,
|
|
'icon' => null,
|
|
'gradient' => null,
|
|
'color' => 'auto',
|
|
])
|
|
|
|
@php
|
|
$percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
|
|
|
|
// Auto-color based on usage
|
|
if ($color === 'auto') {
|
|
if ($percent >= 90) {
|
|
$color = 'danger';
|
|
} elseif ($percent >= 70) {
|
|
$color = 'warning';
|
|
} else {
|
|
$color = 'success';
|
|
}
|
|
}
|
|
|
|
$colorClasses = [
|
|
'primary' => 'text-brand-500',
|
|
'success' => 'text-success-500',
|
|
'warning' => 'text-warning-500',
|
|
'danger' => 'text-error-500',
|
|
'info' => 'text-blue-light-500',
|
|
];
|
|
|
|
$bgColorClasses = [
|
|
'primary' => 'bg-brand-500',
|
|
'success' => 'bg-success-500',
|
|
'warning' => 'bg-warning-500',
|
|
'danger' => 'bg-error-500',
|
|
'info' => 'bg-blue-light-500',
|
|
];
|
|
|
|
$textColor = $colorClasses[$color] ?? $colorClasses['primary'];
|
|
$bgColor = $bgColorClasses[$color] ?? $bgColorClasses['primary'];
|
|
|
|
$badgeLabel = match(true) {
|
|
$percent >= 100 => 'Over entitlement',
|
|
$percent >= 85 => 'Watchlist',
|
|
default => 'Healthy',
|
|
};
|
|
|
|
$badgeClass = match(true) {
|
|
$percent >= 100 => 'text-error-600 bg-error-50 dark:bg-error-500/15 dark:text-error-400',
|
|
$percent >= 85 => 'text-warning-600 bg-warning-50 dark:bg-warning-500/15 dark:text-warning-400',
|
|
default => 'text-success-600 bg-success-50 dark:bg-success-500/15 dark:text-success-400',
|
|
};
|
|
@endphp
|
|
|
|
<div {{ $attributes->class(['flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]']) }}>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="space-y-1">
|
|
<p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
|
|
<p class="text-xl font-bold text-gray-800 dark:text-white/90">
|
|
@if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
|
|
</p>
|
|
@if($sublabel)
|
|
<p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $sublabel }}</p>
|
|
@endif
|
|
</div>
|
|
<span class="rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badgeClass }}">
|
|
{{ $badgeLabel }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between text-theme-xs">
|
|
<span class="text-gray-500 dark:text-gray-400">Usage</span>
|
|
<span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
|
|
</div>
|
|
<div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-300"
|
|
@if($gradient)
|
|
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
|
|
@else
|
|
style="width: {{ min($percent, 130) }}%;"
|
|
class="{{ $bgColor }}"
|
|
@endif
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|