From f4b89ec839732a8f2893464b86f5235c61da3a81 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Thu, 30 Jan 2025 22:33:52 +0100
Subject: [PATCH] Lib: Implement countdown component

---
 src/lib/components/Countdown.svelte | 40 +++++++++++++++++++++++++++++
 src/lib/components/index.ts         |  2 ++
 2 files changed, 42 insertions(+)
 create mode 100644 src/lib/components/Countdown.svelte

diff --git a/src/lib/components/Countdown.svelte b/src/lib/components/Countdown.svelte
new file mode 100644
index 0000000..18c0b9e
--- /dev/null
+++ b/src/lib/components/Countdown.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  interface CountdownProps {
+    date: string;
+    extraclass?: string;
+  }
+
+  let { date, extraclass = "" }: CountdownProps = $props();
+
+  // Set the date we're counting down to
+  const countDownDate = new Date(date).getTime();
+
+  let distance: number = $state(0);
+  let days: number = $state(0);
+  let hours: number = $state(0);
+  let minutes: number = $state(0);
+  let seconds: number = $state(0);
+
+  // Update the countdown every 1 second
+  setInterval(function () {
+    // Get today's date and time
+    const now = new Date().getTime();
+
+    // Find the distance between now and the countdown date
+    distance = countDownDate - now;
+
+    // Time calculations for days, hours, minutes and seconds
+    days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    seconds = Math.floor((distance % (1000 * 60)) / 1000);
+  }, 1000);
+</script>
+
+<span class={extraclass}>
+  {#if distance > 0}
+    {days + "d " + hours + "h " + minutes + "m " + seconds + "s"}
+  {:else}
+    GO GO GO GO
+  {/if}
+</span>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index acba1a7..cf0de75 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,3 +1,4 @@
+import Countdown from "./Countdown.svelte";
 import LazyImage from "./LazyImage.svelte";
 import LoadingIndicator from "./LoadingIndicator.svelte";
 import Table from "./Table.svelte";
@@ -26,6 +27,7 @@ import UserIcon from "./svg/UserIcon.svelte";
 
 export {
   // Components
+  Countdown,
   LazyImage,
   LoadingIndicator,
   Table,