- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals. - Updated various modal button styles for consistency and improved accessibility. - Adjusted transition durations for modal animations to enhance user experience. - Added aria-labels to close buttons for better screen reader support.
137 lines
4.1 KiB
PHP
137 lines
4.1 KiB
PHP
{{--
|
|
Server Status Indicator Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
|
|
Usage:
|
|
<x-proxmox::ui.server-status status="running" />
|
|
<x-proxmox::ui.server-status status="stopped" showLabel />
|
|
<x-proxmox::ui.server-status status="running" minimal />
|
|
--}}
|
|
|
|
@props([
|
|
'status',
|
|
'showLabel' => true,
|
|
'size' => 'md',
|
|
'minimal' => false,
|
|
])
|
|
|
|
@php
|
|
$statusConfig = [
|
|
'running' => [
|
|
'color' => 'success',
|
|
'label' => 'Running',
|
|
'pulse' => true,
|
|
],
|
|
'stopped' => [
|
|
'color' => 'muted',
|
|
'label' => 'Stopped',
|
|
'pulse' => false,
|
|
],
|
|
'paused' => [
|
|
'color' => 'warning',
|
|
'label' => 'Paused',
|
|
'pulse' => false,
|
|
],
|
|
'suspended' => [
|
|
'color' => 'warning',
|
|
'label' => 'Suspended',
|
|
'pulse' => false,
|
|
],
|
|
'migrating' => [
|
|
'color' => 'info',
|
|
'label' => 'Migrating',
|
|
'pulse' => true,
|
|
],
|
|
'starting' => [
|
|
'color' => 'info',
|
|
'label' => 'Starting',
|
|
'pulse' => true,
|
|
],
|
|
'stopping' => [
|
|
'color' => 'warning',
|
|
'label' => 'Stopping',
|
|
'pulse' => true,
|
|
],
|
|
'unknown' => [
|
|
'color' => 'danger',
|
|
'label' => 'Unknown',
|
|
'pulse' => false,
|
|
],
|
|
];
|
|
|
|
$config = $statusConfig[strtolower($status)] ?? $statusConfig['unknown'];
|
|
|
|
$colorClasses = [
|
|
'success' => 'text-success',
|
|
'warning' => 'text-yellow-600 dark:text-yellow-400',
|
|
'danger' => 'text-error',
|
|
'info' => 'text-info',
|
|
'muted' => 'text-secondary',
|
|
];
|
|
|
|
$bgClasses = [
|
|
'success' => 'bg-success/10',
|
|
'warning' => 'bg-warning/15',
|
|
'danger' => 'bg-error/10',
|
|
'info' => 'bg-info/10',
|
|
'muted' => 'bg-neutral/20',
|
|
];
|
|
|
|
$dotClasses = [
|
|
'success' => 'bg-success',
|
|
'warning' => 'bg-warning',
|
|
'danger' => 'bg-error',
|
|
'info' => 'bg-info',
|
|
'muted' => 'bg-neutral',
|
|
];
|
|
|
|
$sizeClasses = [
|
|
'sm' => 'text-xs px-2 py-1',
|
|
'md' => 'text-xs px-2.5 py-1.5',
|
|
'lg' => 'text-sm px-3 py-2',
|
|
];
|
|
|
|
$dotSizeClasses = [
|
|
'sm' => 'w-1.5 h-1.5',
|
|
'md' => 'w-2 h-2',
|
|
'lg' => 'w-2.5 h-2.5',
|
|
];
|
|
@endphp
|
|
|
|
@if($minimal)
|
|
{{-- Minimal dot-only variant --}}
|
|
<div
|
|
{{ $attributes->class(['inline-flex items-center', $showLabel ? 'gap-1.5' : '']) }}
|
|
>
|
|
<span class="relative flex {{ $dotSizeClasses[$size] ?? $dotSizeClasses['md'] }}">
|
|
@if($config['pulse'])
|
|
<span class="absolute inline-flex w-full h-full rounded-full {{ $dotClasses[$config['color']] ?? $dotClasses['muted'] }} opacity-60 animate-ping"></span>
|
|
@endif
|
|
<span class="relative inline-flex rounded-full {{ $dotSizeClasses[$size] ?? $dotSizeClasses['md'] }} {{ $dotClasses[$config['color']] ?? $dotClasses['muted'] }}"></span>
|
|
</span>
|
|
@if($showLabel)
|
|
<span class="font-medium {{ $colorClasses[$config['color']] ?? $colorClasses['muted'] }}">{{ $config['label'] }}</span>
|
|
@endif
|
|
</div>
|
|
@else
|
|
{{-- Full badge variant --}}
|
|
<div
|
|
{{ $attributes->class([
|
|
'inline-flex items-center gap-2 font-medium rounded-full',
|
|
$bgClasses[$config['color']] ?? $bgClasses['muted'],
|
|
$colorClasses[$config['color']] ?? $colorClasses['muted'],
|
|
$sizeClasses[$size] ?? $sizeClasses['md'],
|
|
]) }}
|
|
>
|
|
<span class="relative flex {{ $dotSizeClasses[$size] ?? $dotSizeClasses['md'] }}">
|
|
@if($config['pulse'])
|
|
<span class="absolute inline-flex w-full h-full rounded-full bg-current opacity-60 animate-ping"></span>
|
|
@endif
|
|
<span class="relative inline-flex rounded-full {{ $dotSizeClasses[$size] ?? $dotSizeClasses['md'] }} bg-current"></span>
|
|
</span>
|
|
@if($showLabel)
|
|
<span>{{ $config['label'] }}</span>
|
|
@endif
|
|
</div>
|
|
@endif
|