Joseph.Rawlings
e7b33a2f6c
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
42 lines
1.4 KiB
PHP
42 lines
1.4 KiB
PHP
@props([
|
|
'items' => [],
|
|
'vertical' => false,
|
|
'gap' => '2',
|
|
])
|
|
|
|
@php
|
|
$containerClasses = $vertical
|
|
? "flex flex-col gap-{$gap}"
|
|
: "inline-flex items-center rounded-lg border border-neutral/30 bg-background p-1 gap-1";
|
|
@endphp
|
|
|
|
<div
|
|
x-data="{ activeTab: '{{ collect($items)->first()['id'] ?? '' }}' }"
|
|
{{ $attributes->merge(['class' => $containerClasses]) }}
|
|
>
|
|
{{-- Tab buttons --}}
|
|
<div class="{{ $vertical ? 'flex flex-col gap-1' : 'flex items-center gap-1' }}">
|
|
@foreach($items as $item)
|
|
<button
|
|
type="button"
|
|
@click="activeTab = '{{ $item['id'] }}'"
|
|
:class="activeTab === '{{ $item['id'] }}'
|
|
? 'bg-primary text-white shadow-sm'
|
|
: 'text-base/70 hover:text-base/90 hover:bg-neutral/10'"
|
|
class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 flex items-center gap-2"
|
|
>
|
|
@if(isset($item['icon']))
|
|
<x-dynamic-component :component="$item['icon']" class="size-4" />
|
|
@endif
|
|
{{ $item['label'] }}
|
|
@if(isset($item['badge']))
|
|
<span class="ml-1 px-1.5 py-0.5 text-xs rounded-full bg-white/20">{{ $item['badge'] }}</span>
|
|
@endif
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Tab content --}}
|
|
{{ $slot }}
|
|
</div>
|