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.
46 lines
1.8 KiB
PHP
46 lines
1.8 KiB
PHP
{{--
|
|
Toggle/Switch Component - TailServer Theme
|
|
|
|
Usage:
|
|
<x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
|
|
--}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'description' => null,
|
|
'disabled' => false,
|
|
])
|
|
|
|
<label {{ $attributes->only('class')->class(['flex items-center justify-between gap-4 cursor-pointer group']) }}>
|
|
@if($label || $description)
|
|
<div class="flex flex-col">
|
|
@if($label)
|
|
<span class="text-sm font-medium text-base transition-colors duration-200 group-hover:text-primary">{{ $label }}</span>
|
|
@endif
|
|
@if($description)
|
|
<span class="text-xs text-base/50 transition-colors duration-200 group-hover:text-base/70">{{ $description }}</span>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
{{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
|
|
class="sr-only peer"
|
|
/>
|
|
<div @class([
|
|
'w-11 h-6 rounded-full transition-all duration-300 ease-out',
|
|
'bg-neutral/20 peer-checked:bg-primary peer-checked:shadow-md peer-checked:shadow-primary/30',
|
|
'peer-focus:ring-2 peer-focus:ring-primary/25 peer-focus:ring-offset-2 peer-focus:ring-offset-background',
|
|
'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed',
|
|
'group-hover:bg-neutral/30 peer-checked:group-hover:bg-primary/90',
|
|
])></div>
|
|
<div @class([
|
|
'absolute top-0.5 left-0.5 size-5 bg-white rounded-full shadow-md transition-all duration-300 ease-out',
|
|
'peer-checked:translate-x-5 peer-checked:shadow-lg',
|
|
'group-hover:scale-105 peer-active:scale-95',
|
|
])></div>
|
|
</div>
|
|
</label>
|