ui update!

src/app/components/Clock.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+function format(date: Date) {
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+export default function Clock({
+  className,
+  withSeconds = false,
+}: {
+  className?: string;
+  withSeconds?: boolean;
+}) {
+  const [now, setNow] = useState<Date | null>(() =>
+    typeof window === "undefined" ? null : new Date()
+  );
+
+  useEffect(() => {
+    const id = window.setInterval(
+      () => setNow(new Date()),
+      withSeconds ? 1000 : 10000
+    );
+    return () => window.clearInterval(id);
+  }, [withSeconds]);
+
+  const text = now
+    ? withSeconds
+      ? now.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        })
+      : format(now)
+    : "";
+
+  return (
+    <span className={className} suppressHydrationWarning>
+      {text}
+    </span>
+  );
+}