@props(['prefixes', 'activePrefix' => null])
<div class="flex gap-0 border-b border-gray-200 mb-4 -mx-6 px-6">
    <a href="{{ route('admin.posts.index') }}"
       class="px-4 py-2 text-sm border-b-2 -mb-px {{ !$activePrefix ? 'border-indigo-600 text-indigo-700 font-medium' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
        All
    </a>
    @foreach($prefixes as $prefix)
        <a href="{{ route('admin.posts.index', ['prefix' => $prefix->slug]) }}"
           class="px-4 py-2 text-sm border-b-2 -mb-px {{ $activePrefix?->slug === $prefix->slug ? 'border-indigo-600 text-indigo-700 font-medium' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
            /{{ $prefix->slug }}
        </a>
    @endforeach
</div>