You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
2.3 KiB
PHTML
51 lines
2.3 KiB
PHTML
<div class="w-full mt-4 relativ" x-data="{ isVisible: true }" @click.away="isVisible = false">
|
|
|
|
<input
|
|
wire:model.debounce.300ms="search"
|
|
type="text"
|
|
class="w-full px-3 py-1 pl-8 text-sm bg-gray-800 rounded-full focus:outline-none focus:shadow-outline"
|
|
placeholder="Search (Press '/' to focus)"
|
|
x-ref="search"
|
|
@keydown.window="
|
|
if (event.keyCode === 191) {
|
|
event.preventDefault();
|
|
$refs.search.focus();
|
|
}
|
|
"
|
|
@focus="isVisible = true"
|
|
@keydown.escape.window = "isVisible = false"
|
|
@keydown="isVisible = true"
|
|
@keydown.shift.tab="isVisible = false"
|
|
>
|
|
|
|
|
|
<div wire:loading class="top-0 right-0 mt-3 mr-4 spinner" style="position: absolute"></div>
|
|
@if (strlen($search) >= 2)
|
|
<div class="w-full p-4 mt-4 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600" x-show.transition.opacity.duration.200="isVisible">
|
|
@if (count($searchResults) > 0)
|
|
<ul>
|
|
@foreach ($searchResults as $game)
|
|
<li class="border-b border-gray-900">
|
|
<a
|
|
href="#"
|
|
wire:click="selectGame({{json_encode($game)}})"
|
|
class="flex items-center px-3 py-3 transition duration-150 ease-in-out hover:bg-gray-700"
|
|
@if ($loop->last) @keydown.tab="isVisible=false" @endif
|
|
>
|
|
@if (isset($game['cover']))
|
|
<img src="{{ Str::replaceFirst('thumb', 'cover_small', $game['cover']['url']) }}" alt="cover" class="w-10">
|
|
@else
|
|
<img src="https://via.placeholder.com/264x352" alt="game cover" class="w-10">
|
|
@endif
|
|
<span class="ml-4">{{ $game['name'] }}</span>
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@else
|
|
<div class="px-3 py-3">No results for "{{ $search }}"</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|