owlboard-svelte/src/routes/test/+page.svelte

<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";
    import NearToMeCard from "$lib/cards/NearToMeCard.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>

<LookupCard config={LookupConfig} />
<LookupCard config={TimetableConfig} />
<NearToMeCard />