fix timer

src/components/navigation/style.scss

@@ -5,20 +5,24 @@
     border: 5px solid $primary-color;
     display: none;
 
-    div {
+    > div {
         display: flex;
         gap: 16px;
         font-size: 20px;
         margin: 4px 8px;
 
         .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;
         }
     } 
 }

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>
     );
 }

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;
+    }
+}