@props(['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>