From 481f103ba0c0403291206e31bb244e0d6bbf8290 Mon Sep 17 00:00:00 2001
From: Darius Schefer <darius1702@gmail.com>
Date: Thu, 28 Aug 2025 21:36:53 +0200
Subject: [PATCH] Make clock divider blink

---
 src/components/Datetime/Datetime.tsx     | 13 +++++++------
 src/components/Datetime/style.module.css | 10 ++++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Datetime/Datetime.tsx b/src/components/Datetime/Datetime.tsx
index 1647b30..fcded13 100644
--- a/src/components/Datetime/Datetime.tsx
+++ b/src/components/Datetime/Datetime.tsx
@@ -21,11 +21,8 @@ export default function Datetime() {
         year: "numeric",
     });
 
-    const time = today.toLocaleTimeString(locale, {
-        hour: "numeric",
-        hour12: false,
-        minute: "numeric",
-    });
+    const hour = today.getHours().toString().padStart(2, "0");
+    const minute = today.getMinutes().toString().padStart(2, "0");
 
     return (
         <div className={style.container}>
@@ -33,7 +30,11 @@ export default function Datetime() {
                 <img src="src/assets/clock.png" />
             </div>
             <div className={style.textContainer}>
-                <div className={style.time}>{time}</div>
+                <div className={style.time}>
+                    {hour}
+                    <span className={style.divider}>:</span>
+                    {minute}
+                </div>
                 <div className={style.date}>{date}</div>
             </div>
         </div>
diff --git a/src/components/Datetime/style.module.css b/src/components/Datetime/style.module.css
index af4291f..b91412b 100644
--- a/src/components/Datetime/style.module.css
+++ b/src/components/Datetime/style.module.css
@@ -18,3 +18,13 @@ img {
   display: flex;
   flex-direction: column;
 }
+
+.divider {
+  animation: blink 3s step-end infinite;
+}
+
+@keyframes blink {
+    50% {
+    opacity: 0;
+  }
+}