43 lines
2.3 KiB
PHP
43 lines
2.3 KiB
PHP
@php
|
|
$tabs = [
|
|
'general' => ['label' => __('General'), 'icon' => 'heroicon-o-cog-6-tooth'],
|
|
'dns' => ['label' => __('DNS'), 'icon' => 'heroicon-o-globe-alt'],
|
|
'storage' => ['label' => __('Storage'), 'icon' => 'heroicon-o-circle-stack'],
|
|
'email' => ['label' => __('Email'), 'icon' => 'heroicon-o-envelope'],
|
|
'notifications' => ['label' => __('Notifications'), 'icon' => 'heroicon-o-bell'],
|
|
'php-fpm' => ['label' => __('PHP-FPM'), 'icon' => 'heroicon-o-cpu-chip'],
|
|
];
|
|
@endphp
|
|
|
|
<nav class="fi-tabs flex max-w-full gap-x-1 overflow-x-auto mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10" role="tablist">
|
|
@foreach($tabs as $key => $tab)
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="{{ $this->activeTab === $key ? 'true' : 'false' }}"
|
|
wire:click="setTab('{{ $key }}')"
|
|
@class([
|
|
'fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75',
|
|
'fi-active bg-gray-50 dark:bg-white/5' => $this->activeTab === $key,
|
|
'hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5' => $this->activeTab !== $key,
|
|
])
|
|
>
|
|
<x-filament::icon
|
|
:icon="$tab['icon']"
|
|
@class([
|
|
'fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75',
|
|
'text-primary-600 dark:text-primary-400' => $this->activeTab === $key,
|
|
'text-gray-400 group-hover:text-gray-500 group-focus-visible:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400 dark:group-focus-visible:text-gray-400' => $this->activeTab !== $key,
|
|
])
|
|
/>
|
|
<span @class([
|
|
'fi-tabs-item-label transition duration-75',
|
|
'text-primary-600 dark:text-primary-400' => $this->activeTab === $key,
|
|
'text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200' => $this->activeTab !== $key,
|
|
])>
|
|
{{ $tab['label'] }}
|
|
</span>
|
|
</button>
|
|
@endforeach
|
|
</nav>
|