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
44 lines
1.6 KiB
Vue
44 lines
1.6 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<h1 class="text-2xl font-black text-zinc-800">Saved Stations</h1>
|
|
|
|
<div v-if="loading" class="space-y-2">
|
|
<div v-for="i in 3" :key="i" class="h-16 bg-white rounded-xl animate-pulse border border-zinc-300"></div>
|
|
</div>
|
|
|
|
<div v-else-if="savedStations.length === 0" class="p-8 bg-white rounded-2xl border border-zinc-300 text-center text-zinc-500">
|
|
<iconify-icon icon="lucide:bookmark" class="text-3xl mb-2"></iconify-icon>
|
|
<p class="font-medium">No saved stations yet.</p>
|
|
<p class="text-sm mt-1">Search for fuel and bookmark stations to see them here.</p>
|
|
</div>
|
|
|
|
<div v-else class="space-y-2">
|
|
<div
|
|
v-for="station in savedStations"
|
|
:key="station.station_id"
|
|
class="flex items-center justify-between p-4 bg-white rounded-xl border border-zinc-300"
|
|
>
|
|
<div>
|
|
<p class="font-bold text-zinc-800">{{ station.name }}</p>
|
|
<p class="text-sm text-zinc-500">{{ station.postcode }}</p>
|
|
</div>
|
|
<button
|
|
@click="remove(station.station_id)"
|
|
class="text-sm font-bold text-red-400 hover:text-red-600 transition-colors"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { useSavedStations } from '../../composables/useSavedStations.js'
|
|
|
|
const { savedStations, loading, fetch, remove } = useSavedStations()
|
|
|
|
onMounted(fetch)
|
|
</script>
|