Joseph.Rawlings
7190d7a818
- Refactored select component to align with shadcn design principles. - Updated server status indicator component for consistency with shadcn style. - Modified spinner component to follow shadcn design guidelines. - Enhanced stat card component with shadcn-inspired styles. - Adjusted tab panel component to reflect shadcn design updates. - Revamped table row and table data cell components to match shadcn aesthetics. - Updated table header cell component for improved styling consistency. - Refined table component to align with shadcn design principles. - Enhanced tabs component with shadcn-inspired styles. - Updated toggle component to follow shadcn design guidelines. - Refactored tooltip component to align with shadcn design principles. - Updated server card component to reflect shadcn-inspired design.
44 lines
1.7 KiB
PHP
44 lines
1.7 KiB
PHP
{{--
|
|
Toggle/Switch Component - shadcn-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 items-center justify-between gap-4 cursor-pointer']) }}>
|
|
@if($label || $description)
|
|
<div class="space-y-0.5">
|
|
@if($label)
|
|
<span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{{ $label }}</span>
|
|
@endif
|
|
@if($description)
|
|
<p class="text-[0.8rem] text-muted-foreground">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
{{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
|
|
class="sr-only peer"
|
|
/>
|
|
<div @class([
|
|
'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-150',
|
|
'bg-input peer-checked:bg-primary',
|
|
'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',
|
|
'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
|
])></div>
|
|
<div @class([
|
|
'pointer-events-none absolute top-0.5 left-0.5 block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-150',
|
|
'peer-checked:translate-x-4',
|
|
])></div>
|
|
</div>
|
|
</label>
|