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() {

{activeThread?.title}

+
+ +
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx new file mode 100644 index 0000000..f980e5d --- /dev/null +++ b/src/components/Clock.tsx @@ -0,0 +1,68 @@ +import { useState, useEffect } from "react"; +import { Clock as ClockIcon } from "lucide-react"; + +interface TimeData { + time: string; + date: string; +} + +const POLISH_MONTHS = [ + "stycznia", "lutego", "marca", "kwietnia", "maja", "czerwca", + "lipca", "sierpnia", "września", "października", "listopada", "grudnia" +] as const; + +const POLISH_DAYS = [ + "niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota" +] as const; + +const useClock = (): TimeData => { + const [currentTime, setCurrentTime] = useState(() => new Date()); + + useEffect(() => { + const interval = setInterval(() => { + setCurrentTime(new Date()); + }, 1000); + + return () => clearInterval(interval); + }, []); + + const formatTime = (date: Date): string => { + return [ + date.getHours().toString().padStart(2, "0"), + date.getMinutes().toString().padStart(2, "0"), + date.getSeconds().toString().padStart(2, "0") + ].join(":"); + }; + + const formatDate = (date: Date): string => { + const dayName = POLISH_DAYS[date.getDay()]; + const day = date.getDate(); + const monthName = POLISH_MONTHS[date.getMonth()]; + const year = date.getFullYear(); + + return `${dayName}, ${day} ${monthName} ${year}`; + }; + + return { + time: formatTime(currentTime), + date: formatDate(currentTime) + }; +}; + +function Clock() { + const { time, date } = useClock(); + + return ( +
+
+ + {time} +
+
+ {date} +
+
+ ); +} + +export default Clock;