Feat/clock

.github/workflows/code-review.yml

@@ -3,9 +3,11 @@ name: Code Review for PRs
 on:
   pull_request:
     branches: [master]
+    types: [labeled]
 
 jobs:
   code-review:
+    if: contains(github.event.label.name, 'claude-code-review')
     runs-on: ubuntu-latest
     permissions:
       contents: read

src/components/Clock.tsx

@@ -1,120 +1,78 @@
+import { useState, useEffect } from "react";
 import { Clock as ClockIcon } from "lucide-react";
 
-function Clock() {
-  let now: any = new Date();
-  let time: any =
-    now.getHours().toString().padStart(2, "0") +
+interface ClockProps {
+  className?: string;
+}
+
+const POLISH_MONTHS: readonly string[] = [
+  "stycznia",
+  "lutego",
+  "marca",
+  "kwietnia",
+  "maja",
+  "czerwca",
+  "lipca",
+  "sierpnia",
+  "września",
+  "października",
+  "listopada",
+  "grudnia",
+] as const;
+
+const POLISH_DAYS: readonly string[] = [
+  "niedziela",
+  "poniedziałek", 
+  "wtorek",
+  "środa",
+  "czwartek",
+  "piątek",
+  "sobota",
+] as const;
+
+function formatTime(date: Date): string {
+  return date.getHours().toString().padStart(2, "0") +
     ":" +
-    now.getMinutes().toString().padStart(2, "0") +
+    date.getMinutes().toString().padStart(2, "0") +
     ":" +
-    now.getSeconds().toString().padStart(2, "0");
+    date.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"];
+function formatDate(date: Date): string {
+  return POLISH_DAYS[date.getDay()] + 
+    ", " + 
+    date.getDate() + 
+    " " + 
+    POLISH_MONTHS[date.getMonth()] + 
+    " " + 
+    date.getFullYear();
+}
 
-  let dateStr: any =
-    polishDays[now.getDay()] + ", " + now.getDate() + " " + polishMonths[now.getMonth()] + " " + now.getFullYear();
+function Clock({ className }: ClockProps) {
+  const [time, setTime] = useState<string>("");
+  const [date, setDate] = useState<string>("");
 
-  let timeElement: any;
-  let dateElement: any;
+  useEffect(() => {
+    const updateClock = (): void => {
+      const now = new Date();
+      setTime(formatTime(now));
+      setDate(formatDate(now));
+    };
 
-  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);
+    updateClock();
+    const interval = setInterval(updateClock, 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 () => clearInterval(interval);
+  }, []);
 
   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",
-        }}>
+    <div className={`text-black text-lg font-bold min-w-[70px] text-center font-mono flex flex-col items-center gap-1 ${className || ""}`}>
+      <div className="flex items-center gap-2">
         <ClockIcon size={18} />
-        <span
-          ref={(el: any) => {
-            timeElement = el;
-          }}>
-          {time}
-        </span>
+        <span>{time}</span>
       </div>
-      <div
-        ref={(el: any) => {
-          dateElement = el;
-        }}
-        style={{
-          fontSize: "12px",
-          color: "#666",
-          fontWeight: "normal",
-        }}>
-        {dateStr}
+      <div className="text-xs text-gray-600 font-normal">
+        {date}
       </div>
     </div>
   );