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

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

diff --git a/resources/js/components/StationCard.vue b/resources/js/components/StationCard.vue
new file mode 100644
index 0000000..e7f9e38
--- /dev/null
+++ b/resources/js/components/StationCard.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="flex items-center justify-between p-4 bg-white rounded-xl border border-[#e5ded7] hover:border-[#bb5b3e] transition-colors">
+        <div class="flex items-center gap-3 min-w-0">
+            <div class="w-10 h-10 rounded-lg bg-[#bb5b3e]/10 flex items-center justify-center flex-shrink-0">
+                <iconify-icon
+                    :icon="station.is_supermarket ? 'lucide:shopping-cart' : 'lucide:fuel'"
+                    style="font-size:1.25rem"
+                    class="text-[#bb5b3e]"
+                ></iconify-icon>
+            </div>
+            <div class="min-w-0">
+                <p class="font-bold text-[#4a3f3b] truncate">{{ station.name }}</p>
+                <p class="text-xs text-[#89726c]">{{ station.distance_km.toFixed(1) }} km away · Updated {{ updatedAgo }}</p>
+            </div>
+        </div>
+        <div class="text-right flex-shrink-0 ml-4">
+            <p class="text-xl font-black" :class="priceColor">{{ station.price }}p</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    station: { type: Object, required: true },
+    lowestPrice: { type: Number, default: null },
+})
+
+const priceColor = computed(() => {
+    if (!props.lowestPrice) return 'text-[#4a3f3b]'
+    if (props.station.price_pence === props.lowestPrice) return 'text-[#22c55e]'
+    if (props.station.price_pence > props.lowestPrice + 500) return 'text-[#ef4444]'
+    return 'text-[#4a3f3b]'
+})
+
+const updatedAgo = computed(() => {
+    const updated = new Date(props.station.price_updated_at)
+    const diff = Math.floor((Date.now() - updated) / 60000)
+    if (diff < 60) return `${diff}m ago`
+    const hours = Math.floor(diff / 60)
+    if (hours < 24) return `${hours}h ago`
+    return `${Math.floor(hours / 24)}d ago`
+})
+</script>