61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
<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-accent text-white'
|
|
: 'bg-white border border-zinc-300 text-zinc-500 hover:border-accent'
|
|
]"
|
|
>
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Count -->
|
|
<p class="text-sm text-zinc-500 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' },
|
|
{ label: 'Brand', value: 'brand' },
|
|
{ label: 'Reliable', value: 'reliable' },
|
|
]
|
|
|
|
const lowestPrice = computed(() => {
|
|
if (!props.stations.length) return null
|
|
return Math.min(...props.stations.map(s => s.price_pence))
|
|
})
|
|
</script>
|