'init'

components/ChapterNav.tsx

@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { chapters } from "@/content/ebook";
+
+type ChapterNavProps = {
+  chapterId: string;
+};
+
+export function ChapterNav({ chapterId }: ChapterNavProps) {
+  const index = chapters.findIndex((c) => c.id === chapterId);
+  if (index < 0) return null;
+
+  const prev = index > 0 ? chapters[index - 1] : null;
+  const next = index < chapters.length - 1 ? chapters[index + 1] : null;
+
+  return (
+    <nav
+      className="mt-12 flex flex-col gap-3 border-t border-[var(--border)] pt-8 sm:flex-row sm:justify-between"
+      aria-label="Previous and next chapter"
+    >
+      {prev ? (
+        <Link
+          href={`#${prev.id}`}
+          className="group glass-card flex flex-1 flex-col rounded-2xl px-5 py-4 transition-shadow hover:shadow-[var(--glow-sm)]"
+        >
+          <span className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
+            ← Previous
+          </span>
+          <span className="mt-1 font-medium group-hover:text-[var(--accent)]">
+            {prev.title}
+          </span>
+        </Link>
+      ) : (
+        <div className="hidden flex-1 sm:block" />
+      )}
+      {next ? (
+        <Link
+          href={`#${next.id}`}
+          className="group glass-card flex flex-1 flex-col rounded-2xl px-5 py-4 text-left sm:text-right transition-shadow hover:shadow-[var(--glow-sm)]"
+        >
+          <span className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
+            Next →
+          </span>
+          <span className="mt-1 font-medium group-hover:text-[var(--accent)]">
+            {next.title}
+          </span>
+        </Link>
+      ) : null}
+    </nav>
+  );
+}