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.
108 lines
5.0 KiB
PHP
108 lines
5.0 KiB
PHP
{{--
|
|
Tabs Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
|
|
Usage:
|
|
<x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
|
|
<x-proxmox::ui.tab-panel name="Overview">Overview content</x-proxmox::ui.tab-panel>
|
|
<x-proxmox::ui.tab-panel name="Settings">Settings content</x-proxmox::ui.tab-panel>
|
|
<x-proxmox::ui.tab-panel name="Logs">Logs content</x-proxmox::ui.tab-panel>
|
|
</x-proxmox::ui.tabs>
|
|
--}}
|
|
|
|
@props([
|
|
'tabs' => [],
|
|
'active' => null,
|
|
'variant' => 'default',
|
|
])
|
|
|
|
@php
|
|
$activeTab = $active ?? ($tabs[0] ?? null);
|
|
@endphp
|
|
|
|
<div
|
|
x-data="{ activeTab: '{{ $activeTab }}' }"
|
|
{{ $attributes }}
|
|
>
|
|
{{-- Tab Navigation --}}
|
|
@if($variant === 'pills')
|
|
<div class="flex flex-wrap gap-1 p-1 bg-background-secondary dark:bg-gray-800 rounded-lg border border-neutral dark:border-gray-700">
|
|
@elseif($variant === 'buttons')
|
|
<div class="flex gap-2">
|
|
@else
|
|
<ul class="flex flex-wrap list-none border-b border-neutral dark:border-gray-700">
|
|
@endif
|
|
@foreach($tabs as $tab)
|
|
@php
|
|
$tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
|
|
$tabLabel = is_array($tab) ? ($tab['label'] ?? $tab['name'] ?? '') : $tab;
|
|
$tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
|
|
$tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
|
|
@endphp
|
|
@if($variant === 'pills')
|
|
<button
|
|
type="button"
|
|
@click="activeTab = '{{ $tabName }}'"
|
|
:class="activeTab === '{{ $tabName }}'
|
|
? 'text-primary bg-background dark:bg-gray-700 shadow-sm'
|
|
: 'text-secondary dark:text-gray-400 hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'"
|
|
class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer"
|
|
>
|
|
@if($tabIcon)
|
|
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
|
@endif
|
|
<span>{{ $tabLabel }}</span>
|
|
@if($tabBadge)
|
|
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
|
|
@endif
|
|
</button>
|
|
@elseif($variant === 'buttons')
|
|
<button
|
|
type="button"
|
|
@click="activeTab = '{{ $tabName }}'"
|
|
:class="activeTab === '{{ $tabName }}'
|
|
? 'text-white bg-primary border-primary'
|
|
: 'text-secondary dark:text-gray-400 bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-gray-400'"
|
|
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border rounded-lg shadow-sm transition-all duration-200 cursor-pointer"
|
|
>
|
|
@if($tabIcon)
|
|
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
|
@endif
|
|
<span>{{ $tabLabel }}</span>
|
|
@if($tabBadge)
|
|
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
|
|
@endif
|
|
</button>
|
|
@else
|
|
<li class="-mb-px">
|
|
<button
|
|
type="button"
|
|
@click="activeTab = '{{ $tabName }}'"
|
|
:class="activeTab === '{{ $tabName }}'
|
|
? 'text-primary bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 border-b-background dark:border-b-gray-800'
|
|
: 'text-secondary dark:text-gray-400 border-transparent hover:text-primary hover:border-gray-200 dark:hover:border-gray-600 hover:bg-black/5 dark:hover:bg-white/5'"
|
|
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border border-b-0 rounded-t-lg transition-all duration-150 cursor-pointer"
|
|
>
|
|
@if($tabIcon)
|
|
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
|
@endif
|
|
<span>{{ $tabLabel }}</span>
|
|
@if($tabBadge)
|
|
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
|
|
@endif
|
|
</button>
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
@if($variant === 'pills' || $variant === 'buttons')
|
|
</div>
|
|
@else
|
|
</ul>
|
|
@endif
|
|
|
|
{{-- Tab Panels --}}
|
|
<div class="mt-5">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|