feat: add sort select to homepage SearchBar

resources/js/components/SearchBar.vue

@@ -25,7 +25,7 @@
             </button>
         </div>
 
-        <!-- Row 2: fuel type + radius -->
+        <!-- Row 2: fuel type + radius + sort -->
         <div class="flex gap-3">
             <select
                 v-model="fuelType"
@@ -49,6 +49,17 @@
                 <option :value="10">10 miles</option>
                 <option :value="20">20 miles</option>
             </select>
+            <select
+                v-model="sort"
+                aria-label="Sort by"
+                class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+            >
+                <option value="price">Price</option>
+                <option value="distance">Distance</option>
+                <option value="updated">Updated</option>
+                <option value="brand">Brand</option>
+                <option value="reliable">Reliable</option>
+            </select>
         </div>
     </div>
 </template>
@@ -61,6 +72,7 @@ const emit = defineEmits(['search'])
 const postcode = ref('')
 const fuelType = ref('e10')
 const radius = ref(10)
+const sort = ref('price')
 
 function onSearch() {
     if (!postcode.value.trim()) return
@@ -68,6 +80,7 @@ function onSearch() {
         postcode: postcode.value.trim(),
         fuelType: fuelType.value,
         radius: radius.value,
+        sort: sort.value,
     })
 }
 </script>