@props(['href', 'icon', 'active' => false])
<a href="{{ $href }}" wire:navigate @class(['flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition', 'bg-brand-400 text-zinc-950' => $active, 'text-zinc-400 hover:bg-white/10 hover:text-white' => ! $active])>
    <x-ui.icon :name="$icon" class="h-5 w-5 shrink-0" /> <span>{{ $slot }}</span>
</a>