46 lines
1.8 KiB
Vue
46 lines
1.8 KiB
Vue
<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>
|