26 lines
926 B
Vue
26 lines
926 B
Vue
<template>
|
|
<div class="relative">
|
|
<input v-model="searchQuery" type="text" placeholder="Rechercher..."
|
|
class="px-4 py-2 pl-10 w-48 m-4 h-12 font-bold text-black bg-esyellow border border-none rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-estyellow-dark focus:border-estyellow-dark"
|
|
@input="handleSearch">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-6 pointer-events-none">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const emit = defineEmits(['search'])
|
|
|
|
const searchQuery = ref('')
|
|
|
|
const handleSearch = () => {
|
|
emit('search', searchQuery.value.trim().toLowerCase())
|
|
}
|
|
</script>
|