Add time to LDB

src/lib/navigation/nav-ldb.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     const links = [
         {
             title: "Home",
@@ -8,6 +8,22 @@
     ];
     import { page } from "$app/stores";
     import { IconHome } from "@tabler/icons-svelte";
+    import { onMount } from "svelte";
+
+    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, 1000);
+        return () => clearInterval(interval);
+    })
 </script>
 
 <footer>
@@ -15,7 +31,7 @@
         <a class="footerLink" href={item.path} class:active={$page.url.pathname == item.path}>
             <svelte:component this={item.icon} />
             <br />
-            <span>{item.title}</span>
+            <span class="title">{item.title}</span>
         </a>
     {/each}
     <div class="data-source">
@@ -26,6 +42,7 @@
                 <img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others" />
             </picture>
         </a>
+        <span class="clock">{currentTime}</span>
     </div>
 </footer>
 
@@ -85,9 +102,17 @@
         margin-top: 3px;
         padding: 0;
     }
-    span {
+    .title {
         margin: 0;
         margin-bottom: 3px;
         padding: 0;
     }
+
+    .clock {
+        color: black;
+        font-size: 10px;
+        position: absolute;
+        bottom: 2px;
+        right: 10px;
+    }
 </style>