45 lines
2.5 KiB
PHP
45 lines
2.5 KiB
PHP
<div class="max-w-md">
|
|
|
|
<label class="block text-sm font-medium text-theme-primary"> {{ $label }} </label>
|
|
|
|
<div class="relative" x-data="{ open: false }">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex pl-3 pt-2">
|
|
<svg class="h-5 w-5 text-theme-muted" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
|
|
<input wire:model.live.debounce.300ms="search"
|
|
x-on:focus="open = true"
|
|
x-on:blur="setTimeout(() => { open = false; $wire.set('search', ''); }, 150)"
|
|
class="block w-full rounded-md border border-theme-border bg-white py-2 pl-10 pr-3 leading-5 placeholder-gray-400 shadow-sm transition duration-150 ease-in-out focus:border-theme-border focus:placeholder-gray-700 sm:text-sm"
|
|
placeholder="{{ __('Search') . ' (' . $placeholder . ')' }}" type="search" autocomplete="off">
|
|
|
|
@if (strlen($search) > 2)
|
|
<ul x-show="open" class="absolute z-[60] mt-0 w-full rounded-md border border-theme-border bg-white text-sm text-theme-primary shadow-lg">
|
|
@forelse ($searchResults as $searchResult)
|
|
<li>
|
|
<a wire:click="selectProfile({{ $searchResult['id'] }})" @mousedown.prevent
|
|
class="flex items-center px-2 py-2 hover:bg-gray-100 cursor-pointer">
|
|
<img src="{{ $searchResult['profile_photo_path'] }}" class="w-10 rounded-full profile-photo">
|
|
<div class="ml-3 leading-tight">
|
|
<div class="font-semibold text-theme-primary">{{ $searchResult['name'] }}</div>
|
|
@if(!empty($searchResult['description']) || !empty($searchResult['location']))
|
|
<div class="text-xs text-theme-secondary">
|
|
{{ implode(' · ', array_filter([$searchResult['description'] ?? '', $searchResult['location'] ?? ''])) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
</li>
|
|
@empty
|
|
<li class="px-4 py-4">{{ __('No results found for') }} "{{ $search }}"</li>
|
|
@endforelse
|
|
</ul>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|