feat: implement relative date formatting, real-time clock display

frontend/src/components/ui/DateDisplay.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 interface DateDisplayProps {
   date?: Date;
   className?: string;
@@ -13,15 +15,30 @@ export default function DateDisplay({
     year: "numeric",
   });
 
+  const [now, setNow] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setNow(new Date());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const hours = now.getHours();
+  const minutes = now.getMinutes();
+  const seconds = now.getSeconds();
+
   return (
-    <div
-      className={`text-right flex flex-col gap-2 min-w-[140px] ${className}`}
-    >
+    <div className={`text-right flex flex-col gap-2 min-w-35 ${className}`}>
       <span className="text-[10px] uppercase tracking-[0.4em] text-accent font-bold">
         Date
       </span>
       <span className="text-sm font-serif text-secondary-content italic whitespace-nowrap">
-        {formattedDate}
+        {formattedDate} <br />
+        <span className="text-secondary-content/50 font-sans not-italic">
+          {hours}:{minutes}:{seconds}
+        </span>
       </span>
     </div>
   );