Input and dropdown blade component

<div>
    <x-filament::input.wrapper>
        <x-filament::input
            type="search"
            placeholder="Search lyrics"
            wire:model.live="query"
        />
    </x-filament::input.wrapper>

    @if ($query)
        <x-filament::dropdown.list>
            @forelse ($lyrics as $lyric)
                <x-filament::dropdown.list.item
                    class="bg-gray-200 dark:bg-gray-800"
                    href="/hla/{{ $lyric->slug }}"
                    tag="a"
                >
                    {{ $lyric->title }}
                </x-filament::dropdown.list.item>
            @empty
                <x-filament::dropdown.list.item
                    class="bg-gray-200 dark:bg-gray-800"
                >
                    Not found
                </x-filament::dropdown.list.item>
            @endforelse
        </x-filament::dropdown.list>
    @endif
</div>