From 56ed08f47e7ae078aea90290b92f87db3d689672 Mon Sep 17 00:00:00 2001
From: Marit Radder <maritradder@MacBook-Air-van-Marit.local>
Date: Thu, 11 Jan 2024 12:12:44 +0100
Subject: [PATCH] fix timer

---
 src/components/navigation/style.scss |  8 +++-
 src/components/timer/index.tsx       | 71 ++++++++++++++++++++--------
 src/components/timer/style.scss      | 17 +++++++
 3 files changed, 75 insertions(+), 21 deletions(-)
 create mode 100644 src/components/timer/style.scss

diff --git a/src/components/navigation/style.scss b/src/components/navigation/style.scss
index 9640bfb..ec333e3 100644
--- a/src/components/navigation/style.scss
+++ b/src/components/navigation/style.scss
@@ -5,7 +5,7 @@
     border: 5px solid $primary-color;
     display: none;
 
-    div {
+    > div {
         display: flex;
         gap: 16px;
         font-size: 20px;
@@ -13,12 +13,16 @@
 
         .time {
             margin-left: auto;
-            margin-right: 0;;
+            margin-right: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
         .icon {
             color: $secondary-color;
             margin: 0 8px;
             vertical-align: middle;
+            display: flex;
         }
     } 
 }
diff --git a/src/components/timer/index.tsx b/src/components/timer/index.tsx
index 1b79f9f..6f253b0 100644
--- a/src/components/timer/index.tsx
+++ b/src/components/timer/index.tsx
@@ -1,25 +1,58 @@
 import { h, FunctionalComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import * as style from "./style.scss";
+
 
 
 export const Timer: FunctionalComponent = () => {
-    // const calculateTimeLeft = () => {
-    //     const now = new Date();
-    //     const difference = new Date('2023-12-31T23:59:59');
-    
-    //     let timeLeft = {};
-    
-    //     if (difference > 0) {
-    //       timeLeft = {
-    //         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-    //         hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-    //         minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
-    //       };
-    //     }
-    
-    //     return timeLeft;
-    //   };
-
-    return(
-        <div> Test </div>
+    const calculateTimeLeft = () => {
+        const difference = (new Date("2024-05-25T13:00:00")).valueOf() - (new Date()).valueOf()
+
+        let timeLeft = {};
+
+        if (difference > 0) {
+            
+            const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+
+            setCountdown({
+                days: days,
+                hours: hours,
+                minutes: minutes,
+                seconds: seconds,
+              });
+        } else {
+            setCountdown({
+                days: 0,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+              });
+        }
+    };
+
+    const [countdown, setCountdown] = useState({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      });
+
+    useEffect(() => {
+        const interval = setInterval(calculateTimeLeft, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div class={style.timer}>
+            <div>
+                {countdown.days} <span>d</span>
+                {countdown.hours} <span>h</span>
+                {countdown.minutes} <span>m</span>
+                {countdown.seconds} <span>s</span>
+            </div>
+        </div>
     );
 }
\ No newline at end of file
diff --git a/src/components/timer/style.scss b/src/components/timer/style.scss
new file mode 100644
index 0000000..952802c
--- /dev/null
+++ b/src/components/timer/style.scss
@@ -0,0 +1,17 @@
+@import "./src/mixins";
+@import "./src/variables";
+
+.timer {
+    display: flex;
+
+    > div {
+        gap: 0;
+
+    }
+
+    span {
+        color: $secondary-color;
+        margin-right: 8px;
+        margin-left: -4px;
+    }
+}
\ No newline at end of file