41 lines
1.4 KiB
Vue
41 lines
1.4 KiB
Vue
<template>
|
|
<div class="relative flex flex-col sm:flex-row gap-3 max-w-md w-full">
|
|
<div class="relative flex-1">
|
|
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-[#89726c]">
|
|
<iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
|
|
</span>
|
|
<input
|
|
v-model="postcode"
|
|
@input="onInput"
|
|
type="text"
|
|
placeholder="Enter postcode, e.g. SW1A 1AA"
|
|
class="w-full h-14 pl-12 pr-4 bg-white border border-[#e5ded7] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#bb5b3e] shadow-inner text-base"
|
|
/>
|
|
</div>
|
|
<button
|
|
@click="emit('search', postcode)"
|
|
:disabled="!postcode.trim()"
|
|
class="h-14 px-8 bg-[#bb5b3e] text-white rounded-xl font-bold text-base shadow-xl hover:bg-[#a34a31] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Find Prices
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const emit = defineEmits(['search'])
|
|
const postcode = ref('')
|
|
let debounceTimer = null
|
|
|
|
function onInput() {
|
|
clearTimeout(debounceTimer)
|
|
debounceTimer = setTimeout(() => {
|
|
if (postcode.value.trim().length >= 2) {
|
|
emit('search', postcode.value.trim())
|
|
}
|
|
}, 400)
|
|
}
|
|
</script>
|