fix: empty results state and validation error display on homepage

This commit is contained in:
Ovidiu U
2026-04-11 18:48:25 +01:00
parent 276f9bf612
commit 5fe9f9dc6d

View File

@@ -108,14 +108,20 @@
<!-- Error --> <!-- Error -->
<div v-else-if="error" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-status-bad"> <div v-else-if="error" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-status-bad">
<iconify-icon icon="lucide:circle-alert" style="font-size:1.25rem"></iconify-icon> <iconify-icon icon="lucide:circle-alert" style="font-size:1.25rem"></iconify-icon>
<span class="font-medium">{{ error.general?.[0] ?? 'Unable to load stations. Please try again.' }}</span> <span class="font-medium">{{ Object.values(error).flat()[0] ?? 'Unable to load stations. Please try again.' }}</span>
</div> </div>
<!-- Results --> <!-- Results -->
<template v-else>
<div v-if="!stations.length" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-zinc-500">
<iconify-icon icon="lucide:map-pin-off" style="font-size:1.25rem"></iconify-icon>
<span class="font-medium">No stations found near you. Try a different postcode or increase the radius.</span>
</div>
<template v-else> <template v-else>
<LeafletMap :stations="stations" :default-open="true" /> <LeafletMap :stations="stations" :default-open="true" />
<StationList :stations="stations" :current-sort="sort" @sort="onSort" /> <StationList :stations="stations" :current-sort="sort" @sort="onSort" />
</template> </template>
</template>
</div> </div>
</section> </section>