@props(['activo'])

<div class="flex gap-1 border-b border-stone-200 mb-4 overflow-x-auto">
    @foreach ([
        'portal.dashboard' => 'Inicio',
        'portal.datos' => 'Mis datos',
        'portal.cuotas' => 'Mis cuotas',
        'portal.papeletas' => 'Mis papeletas',
        'portal.calendario' => 'Mi calendario',
    ] as $ruta => $etiqueta)
        <a href="{{ route($ruta) }}" wire:navigate
           class="px-4 py-2.5 text-sm font-medium border-b-2 -mb-px whitespace-nowrap {{ $activo === $ruta ? 'border-current' : 'border-transparent text-stone-500' }}"
           @if($activo === $ruta) style="color: var(--brand); border-color: var(--brand)" @endif>
            {{ $etiqueta }}
        </a>
    @endforeach
</div>