From 490bd21e317de9a2c4631b3a12b9c583ca9c485e Mon Sep 17 00:00:00 2001
From: psmyrdek <przemek.smyrdek@gmail.com>
Date: Thu, 21 Aug 2025 11:52:24 +0200
Subject: [PATCH] feat: clock component

---
 src/components/ChatInterface.tsx |   4 +
 src/components/Clock.tsx         | 123 +++++++++++++++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 src/components/Clock.tsx

diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx
index 639797c..ae7c01b 100644
--- a/src/components/ChatInterface.tsx
+++ b/src/components/ChatInterface.tsx
@@ -6,6 +6,7 @@ import ChatSidebar from "./ChatSidebar";
 import MobileHeader from "./MobileHeader";
 import { useChatStore } from "../stores/chatStore";
 import { useChatMigration } from "../hooks/useChatMigration";
+import Clock from "./Clock";
 
 export default function ChatInterface() {
   const [isLoading, setIsLoading] = useState(false);
@@ -146,6 +147,9 @@ export default function ChatInterface() {
             <div className="flex-1">
               <h1 className="text-xl font-semibold text-gray-900">{activeThread?.title}</h1>
             </div>
+            <div className="flex justify-end">
+              <Clock />
+            </div>
           </div>
         </div>
 
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
new file mode 100644
index 0000000..ccef490
--- /dev/null
+++ b/src/components/Clock.tsx
@@ -0,0 +1,123 @@
+import { Clock as ClockIcon } from "lucide-react";
+
+function Clock() {
+  let now: any = new Date();
+  let time: any =
+    now.getHours().toString().padStart(2, "0") +
+    ":" +
+    now.getMinutes().toString().padStart(2, "0") +
+    ":" +
+    now.getSeconds().toString().padStart(2, "0");
+
+  let polishMonths: any = [
+    "stycznia",
+    "lutego",
+    "marca",
+    "kwietnia",
+    "maja",
+    "czerwca",
+    "lipca",
+    "sierpnia",
+    "września",
+    "października",
+    "listopada",
+    "grudnia",
+  ];
+  let polishDays: any = ["niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota"];
+
+  let dateStr: any =
+    polishDays[now.getDay()] + ", " + now.getDate() + " " + polishMonths[now.getMonth()] + " " + now.getFullYear();
+
+  let timeElement: any;
+  let dateElement: any;
+
+  setTimeout(() => {
+    if (timeElement) {
+      let newNow: any = new Date();
+      timeElement.innerHTML =
+        newNow.getHours().toString().padStart(2, "0") +
+        ":" +
+        newNow.getMinutes().toString().padStart(2, "0") +
+        ":" +
+        newNow.getSeconds().toString().padStart(2, "0");
+    }
+    if (dateElement) {
+      let newNow: any = new Date();
+      dateElement.innerHTML =
+        polishDays[newNow.getDay()] +
+        ", " +
+        newNow.getDate() +
+        " " +
+        polishMonths[newNow.getMonth()] +
+        " " +
+        newNow.getFullYear();
+    }
+  }, 1000);
+
+  setInterval(() => {
+    if (timeElement) {
+      let newNow: any = new Date();
+      timeElement.innerHTML =
+        newNow.getHours().toString().padStart(2, "0") +
+        ":" +
+        newNow.getMinutes().toString().padStart(2, "0") +
+        ":" +
+        newNow.getSeconds().toString().padStart(2, "0");
+    }
+    if (dateElement) {
+      let newNow: any = new Date();
+      dateElement.innerHTML =
+        polishDays[newNow.getDay()] +
+        ", " +
+        newNow.getDate() +
+        " " +
+        polishMonths[newNow.getMonth()] +
+        " " +
+        newNow.getFullYear();
+    }
+  }, 1000);
+
+  return (
+    <div
+      style={{
+        color: "black",
+        fontSize: "18px",
+        fontWeight: "bold",
+        minWidth: "70px",
+        textAlign: "center",
+        fontFamily: "monospace",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "4px",
+      }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+        }}>
+        <ClockIcon size={18} />
+        <span
+          ref={(el: any) => {
+            timeElement = el;
+          }}>
+          {time}
+        </span>
+      </div>
+      <div
+        ref={(el: any) => {
+          dateElement = el;
+        }}
+        style={{
+          fontSize: "12px",
+          color: "#666",
+          fontWeight: "normal",
+        }}>
+        {dateStr}
+      </div>
+    </div>
+  );
+}
+
+export default Clock;