43 lines
1.2 KiB
Svelte
43 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import Card from "./Card.svelte";
|
|
import type { CardConfig } from "./Card.types";
|
|
import { ql } from "$lib/stores/quick-links";
|
|
import LinkButton from "$lib/buttons/LinkButton.svelte";
|
|
|
|
let upstreamProps: CardConfig = {
|
|
title: "Quick Links",
|
|
showHelp: false,
|
|
showRefresh: false,
|
|
helpText: "",
|
|
onRefresh: () => {},
|
|
refreshing: false,
|
|
}
|
|
</script>
|
|
|
|
<Card config={upstreamProps}>
|
|
{#if !$ql.length}
|
|
<p>Go to <a href="/more/settings">Settings</a> to add your quick links</p>
|
|
{:else}
|
|
<div class="quick-links">
|
|
{#each $ql as link}
|
|
{#if link.length === 3}
|
|
<LinkButton text={link.toUpperCase()} link={`/ldb?station=${link.toLowerCase()}`} />
|
|
{:else if link.length === 4}
|
|
<LinkButton text={link.toUpperCase()} link={`/train?headcode=${link.toLowerCase()}`} />
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</Card>
|
|
|
|
<style>
|
|
.quick-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 90%;
|
|
margin: auto;
|
|
padding-top: 5px;
|
|
}
|
|
</style> |