{{--
    Tab Panel Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
--}}

@props([
    'name',
])

<div
    x-show="activeTab === '{{ $name }}'"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 -translate-y-1"
    x-transition:enter-end="opacity-100 translate-y-0"
    {{ $attributes->class(['focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 focus-visible:ring-offset-2 rounded-lg']) }}
>
    {{ $slot }}
</div>