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..9160a72 --- /dev/null +++ b/src/components/Clock.tsx @@ -0,0 +1,56 @@ +import { useState, useEffect } from 'react'; +import { Clock as ClockIcon } from "lucide-react"; + +interface ClockProps { + className?: string; +} + +function Clock({ className }: ClockProps) { + const [currentTime, setCurrentTime] = useState(new Date()); + + useEffect(() => { + const interval = setInterval(() => { + setCurrentTime(new Date()); + }, 1000); + + return () => clearInterval(interval); + }, []); + + const polishMonths = [ + 'stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca', + 'lipca', 'sierpnia', 'września', 'października', 'listopada', 'grudnia' + ] as const; + + const polishDays = [ + 'niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota' + ] as const; + + const formatTime = (date: Date): string => { + return date.toLocaleTimeString('pl-PL', { hour12: false }); + }; + + const formatDate = (date: Date): string => { + const day = polishDays[date.getDay()]; + const dayNum = date.getDate(); + const month = polishMonths[date.getMonth()]; + const year = date.getFullYear(); + + return `${day}, ${dayNum} ${month} ${year}`; + }; + + return ( +
+
+ + + {formatTime(currentTime)} + +
+
+ {formatDate(currentTime)} +
+
+ ); +} + +export default Clock;