Joseph.Rawlings
abff5a381f
- Updated tab-panel component to use Tailwind for styling and transitions. - Refactored table-row component to implement Tailwind classes for hover effects and borders. - Converted table-td component to utilize Tailwind for alignment and text styles. - Changed table-th component to apply Tailwind for header styling and sorting indicators. - Revised table component to adopt Tailwind for layout, borders, and responsive design. - Enhanced tabs component with Tailwind for navigation styles and transitions. - Updated toggle component to use Tailwind for switch styles and accessibility. - Refactored tooltip component to implement Tailwind for positioning and styling. - Added visual enhancements to app.css for improved UI interactions and animations.
40 lines
1.5 KiB
PHP
40 lines
1.5 KiB
PHP
{{--
|
|
Toggle/Switch Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
|
|
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',
|
|
'cursor-not-allowed opacity-65' => $disabled,
|
|
]) }}>
|
|
@if($label || $description)
|
|
<div class="flex flex-col gap-0.5">
|
|
@if($label)
|
|
<span class="text-sm font-medium text-secondary dark:text-gray-300">{{ $label }}</span>
|
|
@endif
|
|
@if($description)
|
|
<p class="text-xs text-secondary/80 dark:text-gray-400">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="relative shrink-0">
|
|
<input
|
|
type="checkbox"
|
|
{{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
|
|
class="peer sr-only"
|
|
/>
|
|
<div class="w-11 h-6 bg-neutral/40 dark:bg-gray-600 rounded-full border-2 border-transparent transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/25 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
|
|
<div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-200 peer-checked:translate-x-5 pointer-events-none"></div>
|
|
</div>
|
|
</label>
|