From 393c9cc147dc198216de72ab37c2485cdd06166d Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Fri, 10 Apr 2026 18:01:38 +0100
Subject: [PATCH] feat: add StationList component with sort tabs

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

diff --git a/resources/js/components/StationList.vue b/resources/js/components/StationList.vue
new file mode 100644
index 0000000..eec8073
--- /dev/null
+++ b/resources/js/components/StationList.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="space-y-3">
+        <!-- Sort tabs -->
+        <div class="flex gap-2">
+            <button
+                v-for="option in sortOptions"
+                :key="option.value"
+                @click="emit('sort', option.value)"
+                :class="[
+                    'px-4 py-1.5 rounded-full text-sm font-bold transition-colors',
+                    currentSort === option.value
+                        ? 'bg-[#bb5b3e] text-white'
+                        : 'bg-white border border-[#e5ded7] text-[#89726c] hover:border-[#bb5b3e]'
+                ]"
+            >
+                {{ option.label }}
+            </button>
+        </div>
+
+        <!-- Count -->
+        <p class="text-sm text-[#89726c] font-medium">
+            {{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
+        </p>
+
+        <!-- Results -->
+        <div class="space-y-2">
+            <StationCard
+                v-for="station in stations"
+                :key="station.station_id"
+                :station="station"
+                :lowest-price="lowestPrice"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import StationCard from './StationCard.vue'
+
+const props = defineProps({
+    stations: { type: Array, required: true },
+    currentSort: { type: String, default: 'price' },
+})
+
+const emit = defineEmits(['sort'])
+
+const sortOptions = [
+    { label: 'Price', value: 'price' },
+    { label: 'Distance', value: 'distance' },
+    { label: 'Updated', value: 'updated' },
+]
+
+const lowestPrice = computed(() => {
+    if (!props.stations.length) return null
+    return Math.min(...props.stations.map(s => s.price_pence))
+})
+</script>