@props(['searches' => []])
@if(filled($searches))
    <ol class="absolute bg-white shadow-xl border border-gray-300 -top-15 w-full rounded-xl py-4 px-4 flex flex-col opacity-0 scale-y-17 group-focus-within:scale-y-100 group-focus-within:top-15 group-focus-within:opacity-100 transition-all duration-300 ease-out">
        @foreach($searches as $search)
            <x-dashboard.user.recent-search.recent-search-item :item="$search"/>
        @endforeach
    </ol>
@endif