@props(['active', 'route'])

@php
    $classes = ($active ?? false)
                ? 'py-1 px-3 bg-zinc-700/75 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
                : 'py-1 px-3 bg-zinc-800 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
@endphp

<form action="{{$route}}"
      method="get">

    <button class="filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-zinc-950"
            type="submit">

        <div class="{{$classes}}">

            <div class="flex flex-row font-bold">
                <div class="text-neutral-200 mr-[3px] text-shadow-sm shadow-zinc-950 ">
                    <
                </div>
                <div {{$attributes->merge(['class' => 'text-shadow-sm'])}}>
                    {{ $slot }}
                </div>
                <div class="text-neutral-200 ml-[2px] text-shadow-sm shadow-zinc-950">
                    >
                </div>
            </div>
        </div>
    </button>

</form>