42 lines
2.2 KiB
PHP
42 lines
2.2 KiB
PHP
@php
|
|
$tabs = [
|
|
'mailboxes' => ['label' => __('Mailboxes'), 'icon' => 'heroicon-o-envelope'],
|
|
'forwarders' => ['label' => __('Forwarders'), 'icon' => 'heroicon-o-arrow-right'],
|
|
'autoresponders' => ['label' => __('Autoresponders'), 'icon' => 'heroicon-o-clock'],
|
|
'catchall' => ['label' => __('Catch-All'), 'icon' => 'heroicon-o-inbox-stack'],
|
|
'logs' => ['label' => __('Logs'), 'icon' => 'heroicon-o-document-text'],
|
|
];
|
|
@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>
|