74 lines
1.6 KiB
Svelte
74 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
|
|
import { fade } from 'svelte/transition';
|
|
import { flip } from 'svelte/animate';
|
|
|
|
import { nearestStationsState } from '$lib/geohash.svelte';
|
|
|
|
const flipDuration = 300;
|
|
</script>
|
|
|
|
<BaseCard header={'Nearby Stations'}>
|
|
<div class="card-content">
|
|
{#if nearestStationsState.error && nearestStationsState.list.length === 0}
|
|
<p class="msg">{nearestStationsState.error}</p>
|
|
{:else if nearestStationsState.loading && nearestStationsState.list.length === 0}
|
|
<p class="msg">Locating stations...</p>
|
|
{:else}
|
|
<div class="stations-flex">
|
|
{#each nearestStationsState.list as station (station.c)}
|
|
<div
|
|
class="btn-container"
|
|
animate:flip={{ duration: flipDuration }}
|
|
in:fade|global={{ duration: 200 }}
|
|
>
|
|
<Button href={`/board?loc=${station.c}`}
|
|
><span class="stn-name">{station.n}</span></Button
|
|
>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</BaseCard>
|
|
|
|
<style>
|
|
.card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 90%;
|
|
min-height: 98px;
|
|
margin: auto;
|
|
padding: 10px 0 0 0;
|
|
}
|
|
|
|
.stations-flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.1rem 0.5rem;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.btn-container {
|
|
display: block;
|
|
width: fit-content;
|
|
will-change: transform;
|
|
}
|
|
|
|
.msg {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--color-title);
|
|
}
|
|
|
|
.stn-name {
|
|
text-transform: capitalize;
|
|
}
|
|
</style>
|