feat: add UpdateViewer component with chapter nav and progress bar

2026-05-01 09:34:45 +08:00
parent cd98d6637f
commit c204c30eb9
1 changed files with 53 additions and 0 deletions
@@ -0,0 +1,53 @@
+"use client"
+
+import { ReadingProgressBar } from "./reading-progress-bar"
+import { ChapterNav } from "./chapter-nav"
+import type { UpdateContent } from "@/lib/updates"
+
+export function UpdateViewer({
+  update,
+}: {
+  update: UpdateContent
+}) {
+  const formattedDate = new Date(update.meta.date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  })
+
+  return (
+    <>
+      <ReadingProgressBar />
+      <div className="w-full max-w-4xl mx-auto px-4 py-8 flex flex-row gap-8">
+        {/* Main content */}
+        <article className="flex-1 min-w-0">
+          <header className="mb-8">
+            <div className="flex flex-row items-center gap-2 mb-2">
+              <span className="text-xs font-mono px-2 py-0.5 rounded bg-primary/10 text-primary border border-primary/20">
+                v{update.meta.version}
+              </span>
+              <time className="text-sm text-text/60">{formattedDate}</time>
+            </div>
+            <h1 className="text-2xl md:text-3xl font-bold">{update.meta.title}</h1>
+          </header>
+          <div
+            className="prose prose-invert prose-p:text-text/80 prose-headings:text-text prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-text prose-code:text-accent prose-code:bg-text/5 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-li:text-text/80 prose-ul:list-disc prose-ol:list-decimal max-w-none"
+            dangerouslySetInnerHTML={{ __html: update.html }}
+          />
+        </article>
+
+        {/* Chapter navigation sidebar (desktop) */}
+        <aside className="hidden md:block w-48 shrink-0">
+          <div className="sticky top-20">
+            <ChapterNav headings={update.headings} />
+          </div>
+        </aside>
+      </div>
+
+      {/* Mobile chapter nav (rendered inside viewer for context) */}
+      <div className="md:hidden">
+        <ChapterNav headings={update.headings} />
+      </div>
+    </>
+  )
+}