Create QuickLinkCard

src/lib/buttons/LinkButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    export let link: string;
+    export let text: string;
+</script>
+
+<a class="link-button" href="{link}">{text}</a>
+
+<style>
+    .link-button {
+        color: aliceblue;
+        border: none;
+        border-radius: 20px;
+        text-decoration: none;
+        margin: 5px;
+        background-color: var(--island-button-color);
+        padding: 5px 10px;
+        min-width: 40px;
+        height: 25px;
+        font-size: 16px;
+        font-weight: 400;
+        box-shadow: var(--box-shadow);
+        transition: all 0.3s ease;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .link-button:hover {
+        box-shadow: var(--box-shadow-dark);
+        background-color: rgb(45,45,45);
+    }
+</style>

src/lib/buttons/LinkButton.types.ts

@@ -0,0 +1,4 @@
+export interface LinkButtonConfig {
+    text: string;
+    link: string;
+}

src/lib/cards/QuickLinkCard.svelte

@@ -0,0 +1,43 @@
+<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={"#null"} />
+                {:else if link.length === 4}
+                    <LinkButton text={link.toUpperCase()} link={"#null"} />
+                {/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>

src/routes/test/+page.svelte

@@ -2,6 +2,7 @@
     import type { LookupCardConfig } from "$lib/cards/Card.types";
     import LookupCard from "$lib/cards/LookupCard.svelte";
     import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
+    import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
 
     let LookupConfig: LookupCardConfig = {
         title: "Live Arr/Dep Boards",
@@ -29,3 +30,4 @@
 <LookupCard config={LookupConfig} />
 <LookupCard config={TimetableConfig} />
 <NearToMeCard />
+<QuickLinkCard />