Add live clock to top bar

src/app/(site)/login/page.tsx

@@ -12,6 +12,7 @@ import { siteSettings } from "@/lib/services/site-settings";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
+import { Clock } from "@/components/clock";
 
 export default async function LoginPage() {
 	const t = await getTranslations("pages.login");
@@ -79,6 +80,8 @@ export default async function LoginPage() {
 						)}
 						<LanguageSwitcher />
 						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<Clock />
+						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>

src/app/(site)/page.tsx

@@ -15,6 +15,7 @@ import { ThemeSwitcher } from "@/components/theme-switcher";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { HomeLoginForm } from "@/components/auth/home-login-form";
 import { Reveal } from "@/components/motion-reveal";
+import { Clock } from "@/components/clock";
 
 export const revalidate = 120;
 
@@ -105,6 +106,8 @@ export default async function Home() {
 						)}
 						<LanguageSwitcher />
 						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<Clock />
+						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>

src/app/(site)/register/page.tsx

@@ -12,6 +12,7 @@ import { siteSettings } from "@/lib/services/site-settings";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
+import { Clock } from "@/components/clock";
 
 export default async function RegisterPage() {
 	const th = await getTranslations("header");
@@ -79,6 +80,8 @@ export default async function RegisterPage() {
 						)}
 						<LanguageSwitcher />
 						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<Clock />
+						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>

src/components/clock.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function Clock() {
+	const [time, setTime] = useState("");
+
+	useEffect(() => {
+		function update() {
+			const now = new Date();
+			setTime(
+				now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+			);
+		}
+		update();
+		const id = setInterval(update, 30_000);
+		return () => clearInterval(id);
+	}, []);
+
+	if (!time) return null;
+
+	return (
+		<span
+			className="text-[11px] font-bold tabular-nums select-none"
+			style={{ color: "color-mix(in srgb, var(--color-text-muted) 60%, transparent)" }}
+		>
+			{time}
+		</span>
+	);
+}