Add TimeBar

src/lib/navigation/TimeBar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    export let updatedTime: Date = new Date();
+
+let currentTime: string = "00:00:00"
+function updateTime() {
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0');
+    const mins = now.getMinutes().toString().padStart(2, '0');
+    const secs = now.getSeconds().toString().padStart(2, '0');
+    currentTime = `${hours}:${mins}:${secs}`
+}
+
+onMount(() => {
+    updateTime();
+    const interval = setInterval(updateTime, 500);
+    return () => clearInterval(interval);
+})
+</script>
+
+<div id="TimeBar">
+    <span class="updated-time">Updated: {updatedTime.toLocaleTimeString()}</span>
+    <span class="current-time">{currentTime}</span>
+</div>
+
+<style>
+    #TimeBar {
+        width: 100%;
+        background-color: black;
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0;
+    }
+    .updated-time {
+        font-family: firamono, 'Courier New', Courier, monospace;
+        margin-left: 10px;
+    }
+    .current-time {
+        font-family: firamono, 'Courier New', Courier, monospace;
+        font-weight: 900;
+        vertical-align: middle;
+        color: orange;
+        margin-right: 10px;
+    }
+</style>

src/routes/test/+page.svelte

@@ -3,6 +3,9 @@
     import LookupCard from "$lib/cards/LookupCard.svelte";
     import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
     import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
+    import Header from "$lib/navigation/header.svelte";
+    import Nav from "$lib/navigation/nav.svelte";
+    import TimeBar from "$lib/navigation/TimeBar.svelte";
 
     let LookupConfig: LookupCardConfig = {
         title: "Live Arr/Dep Boards",
@@ -26,8 +29,10 @@
         console.log("Refresh");
     }
 </script>
-
+<Header title={"Test"} />
+<TimeBar />
 <LookupCard config={LookupConfig} />
 <LookupCard config={TimetableConfig} />
 <NearToMeCard />
 <QuickLinkCard />
+<Nav />