Rewrite Cards - not yet implemented on public pages

src/lib/cards/Card.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { fade } from "svelte/transition";
+    import type { CardConfig } from "./Card.types";
+    import { IconHelpCircle, IconRefresh } from "@tabler/icons-svelte";
+    import Tooltip from "$lib/Tooltip.svelte";
+
+    export let config: CardConfig;
+</script>
+
+<div class="card" in:fade={{ duration: 250 }}>
+    <div class="header">
+        <h2 class="title">{config.title}</h2>
+        <div class="actions">
+            {#if config.showHelp}
+                <Tooltip text={config.helpText}>
+                    <button aria-label="Help">
+                        <IconHelpCircle />
+                    </button>
+                </Tooltip>
+            {/if}
+            {#if config.showRefresh}
+                <button on:click={config.onRefresh} aria-label="Refresh">
+                    <IconRefresh />
+                </button>
+            {/if}
+        </div>
+    </div>
+    <div class="content">
+        <slot />
+    </div>
+</div>
+
+<style>
+    .card {
+        width: 85%;
+        max-width: 400px;
+        margin: auto;
+        margin-top: 25px;
+        padding: 10px;
+        background-color: var(--island-bg-color);
+        border-radius: 10px;
+        box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.29);
+    }
+
+    .header {
+        color: var(--island-header-color);
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.29);
+    }
+
+    .title {
+        flex-grow: 1;
+        text-align: center;
+        margin: 0;
+    }
+
+    .actions {
+        display: flex;
+        position: absolute;
+        right: 0;
+        display: flex;
+        gap: 1px
+    }
+
+    .content {
+        margin-top: 16px;
+    }
+
+    button {
+        cursor: pointer;
+        color: white;
+        background: none;
+        border: none;
+    }
+</style>

src/lib/cards/Card.types.ts

@@ -0,0 +1,16 @@
+export interface CardConfig {
+    title: string;
+    showHelp: boolean;
+    showRefresh: boolean;
+    helpText: string;
+    onRefresh: () => void;
+}
+
+export interface LookupCardConfig {
+    title: string;
+    formAction: string;
+    maxLen: number;
+    placeholder: string;
+    helpText: string;
+    fieldName: string;
+}

src/lib/cards/LookupCard.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import Card from "./Card.svelte";
+    import type { CardConfig, LookupCardConfig } from "./Card.types";
+
+    export let config: LookupCardConfig;
+
+    let upstreamConfig: CardConfig = {
+        title: config.title,
+        showHelp: false, // If enabled without showRefresh, cards will be shifted to left!
+        showRefresh: false,
+        helpText: config.helpText,
+        onRefresh: () => {},
+    };
+</script>
+
+<Card config={upstreamConfig}>
+    <form action={config.formAction}>
+        <input type="text" name={config.fieldName} placeholder={config.placeholder} maxlength={config.maxLen} autocomplete="off">
+        <br>
+        <button type="submit">Submit</button>
+    </form>
+</Card>
+
+<style>
+    input {
+        width: 75%;
+        max-width: 250px;
+        text-align: center;
+        text-transform: uppercase;
+        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+        height: 30px;
+        border: none;
+        border-radius: 20px;
+        box-shadow: var(--box-shadow);
+        transition: all 0.3s ease;
+    }
+
+    button {
+        margin: 10px;
+        background-color: var(--island-button-color);
+        color: white;
+        border: none;
+        border-radius: 20px;
+        width: 40%;
+        max-width: 200px;
+        height: 25px;
+        box-shadow: var(--box-shadow);
+        transition: all 0.3s ease;
+    }
+
+    input:hover {
+        box-shadow: var(--box-shadow-dark);
+
+    }
+
+    button:hover {
+        background-color: rgb(45, 45, 45);
+        box-shadow: var(--box-shadow-dark);
+    }
+</style>

src/routes/test/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import Card from "$lib/cards/Card.svelte";
+    import type { LookupCardConfig } from "$lib/cards/Card.types";
+    import LookupCard from "$lib/cards/LookupCard.svelte";
+
+    let CardConfig = {
+        title: "Near to Me",
+        showHelp: false,
+        showRefresh: true,
+        helpText: "May not detect your location correctly on non-mobile devices",
+        onRefresh: onRefresh,
+    };
+
+    let LookupConfig: LookupCardConfig = {
+        title: "Live Arr/Dep Boards",
+        helpText: "Enter CRS, TIPLOC or STANOX code to see live departures",
+        placeholder: "Enter CRS/TIPLOC/STANOX",
+        maxLen: 7,
+        formAction: "/ldb/",
+        fieldName: "station"
+    };
+
+    let TimetableConfig: LookupCardConfig = {
+        title: "Timetable & PIS",
+        helpText: "Enter a headcode to search the timetable and check PIS Codes",
+        placeholder: "Enter headcode",
+        maxLen: 4,
+        formAction: "/train/",
+        fieldName: "headcode"
+    }
+
+    function onRefresh() {
+        console.log("Refresh");
+    }
+</script>
+
+<Card config={CardConfig}>
+    <p>content</p>
+</Card>
+
+<LookupCard config={LookupConfig} />
+<LookupCard config={TimetableConfig} />