From acade5a7358a36655b454c00f4673eab70f46c1d Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Fri, 10 Apr 2026 18:01:10 +0100
Subject: [PATCH] feat: add SearchBar component with debounce

---
 resources/js/components/SearchBar.vue | 40 +++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 resources/js/components/SearchBar.vue

diff --git a/resources/js/components/SearchBar.vue b/resources/js/components/SearchBar.vue
new file mode 100644
index 0000000..481d320
--- /dev/null
+++ b/resources/js/components/SearchBar.vue
@@ -0,0 +1,40 @@
+<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>