feat(reader): add reading-demo library page

2026-08-31 07:33:24 +00:00
parent b87b7516dc
commit 7743e6fa75
1 changed files with 57 additions and 0 deletions
@@ -0,0 +1,57 @@
+import Head from "next/head";
+import Link from "next/link";
+import ReaderNav from "../../components/reader/ReaderNav";
+import ReaderFooter from "../../components/reader/ReaderFooter";
+import { LIBRARY } from "../../data/sample-chapter";
+
+export default function ReadLibrary() {
+  return (
+    <>
+      <Head>
+        <title>Library — AIBook.fun reading demo</title>
+        <meta
+          name="description"
+          content="People read chapters, not a shelf of cards. Sample reading environment for AIBook.fun."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <ReaderNav />
+      <main>
+        <section className="section contents reader-library">
+          <div className="wrap">
+            <span className="spec demo-chip">Reading demo · not the live book</span>
+            <h1 className="library-title">Chapters, not a shelf of cards.</h1>
+            <p className="library-lede">
+              A chapter is a substantial essay for one vertical. Full workflows nest
+              in the argument, at the point they earn. One chapter is readable here.
+              The rest of the shelf is listed so you can see the library.
+            </p>
+            <div className="toc">
+              {LIBRARY.map((item) =>
+                item.status === "ready" ? (
+                  <Link href={item.href} key={item.num}>
+                    <span className="num">{item.num}</span>
+                    <span className="name">{item.name}</span>
+                    <span className="desc">{item.desc}</span>
+                    <span className="arrow" aria-hidden="true">
+                      →
+                    </span>
+                  </Link>
+                ) : (
+                  <div className="toc-soon" key={item.num} aria-disabled="true">
+                    <span className="num">{item.num}</span>
+                    <span className="name">{item.name}</span>
+                    <span className="desc">{item.desc}</span>
+                    <span className="soon">Coming</span>
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </section>
+      </main>
+      <ReaderFooter />
+    </>
+  );
+}