sls/resources/views/components/tab-button.blade.php

27 lines
781 B
PHP

@props([
'id' => null,
'active' => false,
'icon' => null,
'tabKey' => null,
])
@php
$baseClasses = 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-md transition-colors duration-150 cursor-pointer select-none border-none';
$activeClasses = $active
? 'bg-[#4b82f7] text-white shadow-sm active'
: 'bg-transparent text-slate-400 hover:text-slate-200';
@endphp
<button
@if($id) id="{{ $id }}" @endif
type="button"
@if($tabKey) data-tab="{{ $tabKey }}" @endif
{{ $attributes->merge(['class' => implode(' ', ['tab', $baseClasses, $activeClasses])]) }}>
@if($icon)
<i class="{{ $icon }} text-[11px]"></i>
@endif
@if(trim($slot))
<span>{{ $slot }}</span>
@endif
</button>