<div class="flex space-x-4 my-4">

    <div class="cursor-pointer flex items-center space-x-2 p-2
               {{ $this->selectedFilter == null ? 'border-b border-black border-1 text-black font-semibold' : 'text-gray-500' }}"
        wire:click="$set('selectedFilter', null)">
        Alle
    </div>

    @foreach($this->userFilters as $name => $userFilter)
    <div class="cursor-pointer flex items-center space-x-2 p-2
                   {{ $this->selectedFilter == $name ? 'border-b border-black border-1 text-black font-semibold' : 'text-gray-500' }}"
        wire:click="$set('selectedFilter', '{{ $name }}')" >


        <div>
        {!! optional($userFilter)['icon']  !!}

        </div>


        <div>
            {{ $name }}
        </div>
    </div>
    @endforeach
</div>
