65 lines
2.7 KiB
HTML
65 lines
2.7 KiB
HTML
<div class="w-full space-y-4 sm:space-y-6 z-[800]">
|
|
<!-- Filtres -->
|
|
<div>
|
|
<app-filter (filtersChanged)="onFiltersChanged($event)" />
|
|
</div>
|
|
|
|
<!-- Barre de recherche -->
|
|
<ng-container *ngTemplateOutlet="form"></ng-container>
|
|
</div>
|
|
|
|
<ng-template #form>
|
|
<form [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="w-full">
|
|
<div class="flex flex-col sm:flex-row gap-3 sm:gap-0 w-full">
|
|
<div
|
|
class="flex-1 flex items-center gap-2 sm:gap-3 px-4 py-3 sm:py-2.5 border border-gray-300 dark:border-gray-700 rounded-full sm:rounded-l-full sm:rounded-r-none bg-white dark:bg-gray-800"
|
|
>
|
|
<!-- Icône de recherche -->
|
|
<button
|
|
type="button"
|
|
class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
aria-label="Icône de recherche"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-full h-full"
|
|
viewBox="0 0 512 512"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M337.509 305.372h-17.501l-6.571-5.486c20.791-25.232 33.922-57.054 33.922-93.257C347.358 127.632 283.896 64 205.135 64 127.452 64 64 127.632 64 206.629s63.452 142.628 142.225 142.628c35.011 0 67.831-13.167 92.991-34.008l6.561 5.487v17.551L415.18 448 448 415.086 337.509 305.372zm-131.284 0c-54.702 0-98.463-43.887-98.463-98.743 0-54.858 43.761-98.742 98.463-98.742 54.7 0 98.462 43.884 98.462 98.742 0 54.856-43.762 98.743-98.462 98.743z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Input de recherche -->
|
|
<input
|
|
formControlName="search"
|
|
type="search"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="none"
|
|
spellcheck="false"
|
|
class="flex-1 focus:ring-0 focus:outline-none placeholder:text-gray-400 bg-transparent text-gray-800 dark:text-white text-sm sm:text-base"
|
|
placeholder="Rechercher par nom, prénom..."
|
|
aria-label="Rechercher un profil"
|
|
aria-controls="search_results"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Bouton de recherche -->
|
|
<button
|
|
type="submit"
|
|
class="w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-2.5 rounded-full sm:rounded-l-none sm:rounded-r-full bg-purple-600 hover:bg-purple-700 active:bg-purple-800 text-white font-medium text-sm sm:text-base transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span class="hidden sm:inline">{{
|
|
searchForm.value!.search! === '' ? 'Voir tout' : 'Rechercher'
|
|
}}</span>
|
|
<span class="sm:hidden">{{
|
|
searchForm.value!.search! === '' ? 'Tout' : 'Rechercher'
|
|
}}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</ng-template>
|