dd9bd95657
- Consolidate HeroSearch into single responsive form with inline geolocation button and submit actions - Transform SearchBar into pill-based filter bar with visual state indicators (active filters highlighted) - Move map toggle from separate component into SearchBar with open/close state management - Redesign StationList sort controls as pills with icons, move brand filter inline, add result count - Expand LeafletMap to full-width panel (96 viewport height) controlled by parent open state - Remove nested mobile/desktop layouts in HeroSearch in favor of single adaptive form - Add "Refine" and "Sort" labels to filter groups, implement clear-all filters button - Show verdict card only before first search on mobile, hide after results load - Position StatsRow within hero gradient, move results section into same gradient container - Update map initialization to only occur when panel is open, destroy on close - Add accessibility labels (aria-expanded, aria-controls) to map toggle button
29 lines
948 B
Vue
29 lines
948 B
Vue
<template>
|
|
<dl class="hidden md:flex items-center divide-x divide-zinc-300">
|
|
<div v-for="stat in stats" :key="stat.label" class="px-8 first:pl-0 last:pr-0">
|
|
<dt class="sr-only">{{ stat.label }}</dt>
|
|
<dd>
|
|
<span class="block font-serif text-2xl text-zinc-900 leading-none">{{ stat.value }}</span>
|
|
<span class="block font-mono text-[11px] uppercase tracking-widest text-zinc-500 mt-1.5">{{ stat.label }}</span>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
stationCount: { type: Number, default: null },
|
|
})
|
|
|
|
const stats = computed(() => [
|
|
{
|
|
value: props.stationCount ? props.stationCount.toLocaleString('en-GB') : '11,482',
|
|
label: 'Stations tracked',
|
|
},
|
|
{ value: '£273', label: 'Median saving / yr' },
|
|
{ value: '84%', label: 'Forecast accuracy' },
|
|
])
|
|
</script>
|