Add QuickLinks based on 'frecency' pattern

src/lib/components/ui/cards/QuickLinksCard.svelte

@@ -0,0 +1,71 @@
+<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 { quickLinks } from '$lib/quick-links.svelte';
+
+	const flipDuration = 300;
+</script>
+
+<BaseCard header={'Quick Links'}>
+	<div class="card-content">
+		{#if quickLinks.list.length === 0}
+			<p class="msg">Your most viewed stations will appear here</p>
+		{:else}
+			<div class="stations-flex">
+				{#each quickLinks.list as station (station.id)}
+					<div
+						class="btn-container"
+						animate:flip={{ duration: flipDuration }}
+						in:fade|global={{ duration: 200 }}
+					>
+						<Button href={`/board?loc=${station.id}`}
+							><span class="stn-name">{station.id}</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 10px 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>