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.
103 lines
3.0 KiB
PHP
103 lines
3.0 KiB
PHP
@props([
|
|
'value' => 0,
|
|
'max' => 100,
|
|
'size' => 'md',
|
|
'variant' => 'primary',
|
|
'label' => null,
|
|
'showValue' => false,
|
|
'animated' => false,
|
|
'striped' => false,
|
|
])
|
|
|
|
@php
|
|
$percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
|
|
|
|
// Size classes
|
|
$sizeClasses = match($size) {
|
|
'xs' => 'h-1',
|
|
'sm' => 'h-2',
|
|
'md' => 'h-3',
|
|
'lg' => 'h-4',
|
|
'xl' => 'h-5',
|
|
default => 'h-3',
|
|
};
|
|
|
|
// Variant classes for the fill
|
|
$variantClasses = match($variant) {
|
|
'primary' => 'bg-primary',
|
|
'secondary' => 'bg-secondary',
|
|
'success' => 'bg-success',
|
|
'danger' => 'bg-danger',
|
|
'warning' => 'bg-warning',
|
|
'info' => 'bg-info',
|
|
'gradient' => 'bg-gradient-to-r from-primary to-secondary',
|
|
default => 'bg-primary',
|
|
};
|
|
|
|
// Dynamic color based on percentage
|
|
if ($variant === 'auto') {
|
|
if ($percentage >= 90) {
|
|
$variantClasses = 'bg-danger';
|
|
} elseif ($percentage >= 70) {
|
|
$variantClasses = 'bg-warning';
|
|
} else {
|
|
$variantClasses = 'bg-success';
|
|
}
|
|
}
|
|
|
|
// Animation classes
|
|
$animationClasses = $animated ? 'transition-all duration-500 ease-out' : '';
|
|
$stripedClasses = $striped ? 'bg-stripes' : '';
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => 'flex flex-col gap-1.5']) }}>
|
|
{{-- Label and value row --}}
|
|
@if($label || $showValue)
|
|
<div class="flex items-center justify-between text-sm">
|
|
@if($label)
|
|
<span class="text-base/70 font-medium">{{ $label }}</span>
|
|
@endif
|
|
@if($showValue)
|
|
<span class="text-base/90 font-semibold">{{ number_format($percentage, 1) }}%</span>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Progress bar container --}}
|
|
<div class="w-full bg-neutral/20 rounded-full overflow-hidden {{ $sizeClasses }}">
|
|
{{-- Progress bar fill --}}
|
|
<div
|
|
class="{{ $sizeClasses }} {{ $variantClasses }} {{ $animationClasses }} {{ $stripedClasses }} rounded-full"
|
|
style="width: {{ $percentage }}%"
|
|
role="progressbar"
|
|
aria-valuenow="{{ $value }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="{{ $max }}"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
@once
|
|
<style>
|
|
.bg-stripes {
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
rgba(255, 255, 255, 0.15) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, 0.15) 50%,
|
|
rgba(255, 255, 255, 0.15) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
background-size: 1rem 1rem;
|
|
animation: progress-stripes 1s linear infinite;
|
|
}
|
|
|
|
@keyframes progress-stripes {
|
|
from { background-position: 1rem 0; }
|
|
to { background-position: 0 0; }
|
|
}
|
|
</style>
|
|
@endonce
|