Joseph.Rawlings
7a089f53e2
- Changed badge, button, card, dropdown, input, modal, select, table, tabs, toggle, and tooltip components to align with the TailAdmin design system. - Updated class names and styles for consistency across components. - Enhanced accessibility and responsiveness in various components. - Improved hover and focus states for better user experience.
45 lines
1.6 KiB
PHP
45 lines
1.6 KiB
PHP
{{--
|
|
Toggle/Switch Component - TailAdmin style
|
|
|
|
Usage:
|
|
<x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
|
|
--}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'description' => null,
|
|
'disabled' => false,
|
|
])
|
|
|
|
<label {{ $attributes->only('class')->class(['flex cursor-pointer items-center justify-between gap-4']) }}>
|
|
@if($label || $description)
|
|
<div class="space-y-0.5">
|
|
@if($label)
|
|
<span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</span>
|
|
@endif
|
|
@if($description)
|
|
<p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
{{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
|
|
class="peer sr-only"
|
|
/>
|
|
<div @class([
|
|
'block h-6 w-11 rounded-full border-2 border-transparent transition-colors duration-200',
|
|
'bg-gray-200 peer-checked:bg-brand-500',
|
|
'peer-focus-visible:outline-none peer-focus-visible:ring-3 peer-focus-visible:ring-brand-500/20',
|
|
'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
|
'dark:bg-gray-700 dark:peer-checked:bg-brand-500',
|
|
])></div>
|
|
<div @class([
|
|
'pointer-events-none absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-theme-sm ring-0 transition-transform duration-200',
|
|
'peer-checked:translate-x-5',
|
|
])></div>
|
|
</div>
|
|
</label>
|