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.
81 lines
3.4 KiB
PHP
81 lines
3.4 KiB
PHP
{{--
|
|
Tabs Component - shadcn-style
|
|
|
|
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
|
|
$variantClasses = [
|
|
'default' => [
|
|
'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
|
|
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
|
'active' => 'bg-background text-foreground shadow',
|
|
'inactive' => 'hover:bg-background/50 hover:text-foreground',
|
|
],
|
|
'pills' => [
|
|
'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
|
|
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all duration-150',
|
|
'active' => 'bg-background text-foreground shadow',
|
|
'inactive' => 'hover:bg-background/50 hover:text-foreground',
|
|
],
|
|
'buttons' => [
|
|
'container' => 'flex gap-2',
|
|
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors duration-150',
|
|
'active' => 'bg-primary text-primary-foreground shadow',
|
|
'inactive' => 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
|
],
|
|
];
|
|
|
|
$styles = $variantClasses[$variant] ?? $variantClasses['default'];
|
|
$activeTab = $active ?? ($tabs[0] ?? null);
|
|
@endphp
|
|
|
|
<div
|
|
x-data="{ activeTab: '{{ $activeTab }}' }"
|
|
{{ $attributes }}
|
|
>
|
|
{{-- Tab Navigation --}}
|
|
<div class="{{ $styles['container'] }}">
|
|
@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
|
|
<button
|
|
type="button"
|
|
@click="activeTab = '{{ $tabName }}'"
|
|
:class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
|
|
class="{{ $styles['tab'] }} gap-2"
|
|
>
|
|
@if($tabIcon)
|
|
<x-dynamic-component :component="$tabIcon" class="size-4" />
|
|
@endif
|
|
<span>{{ $tabLabel }}</span>
|
|
@if($tabBadge)
|
|
<span class="ml-1.5 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
|
|
{{ $tabBadge }}
|
|
</span>
|
|
@endif
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Tab Panels --}}
|
|
<div class="mt-4">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|