069a85cf11
Replace all hardcoded hex color values with semantic Tailwind design tokens: - `#bb5b3e` → `accent` - `#a34a31` → `accent-content` / `primary-dark` - `#4a3f3b`, `#89726c` → `zinc-800`, `zinc-500` - `#e5ded7`, `#faf6f3` → `zinc-300`, `zinc-50` - `#8
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-zinc-300 hover:border-accent transition-colors">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<div class="w-10 h-10 rounded-lg bg-accent/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-accent"
|
|
></iconify-icon>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="font-bold text-zinc-800 truncate">{{ station.name }}</p>
|
|
<p class="text-xs text-zinc-500">{{ 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-zinc-800'
|
|
if (props.station.price_pence === props.lowestPrice) return 'text-status-good'
|
|
if (props.station.price_pence > props.lowestPrice + 500) return 'text-status-bad'
|
|
return 'text-zinc-800'
|
|
})
|
|
|
|
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>
|