feat(reader): add Real Estate sample chapter

2026-08-31 07:33:25 +00:00
parent 7743e6fa75
commit 6dfa941683
1 changed files with 145 additions and 0 deletions
@@ -0,0 +1,145 @@
+import { useEffect } from "react";
+import Head from "next/head";
+import ReaderNav from "../../components/reader/ReaderNav";
+import ReaderFooter from "../../components/reader/ReaderFooter";
+import WorkflowBlock from "../../components/reader/WorkflowBlock";
+import useActivation from "../../components/reader/useActivation";
+import { CHAPTER, RECIPES } from "../../data/sample-chapter";
+
+const RECIPE_IDS = RECIPES.map((r) => r.id);
+
+function Essay({ heading, paragraphs }) {
+  return (
+    <section className="essay">
+      <h2>{heading}</h2>
+      {paragraphs.map((p) => (
+        <p key={p}>{p}</p>
+      ))}
+    </section>
+  );
+}
+
+export default function RealEstateChapter() {
+  const { complete, toggle, count, total } = useActivation(RECIPE_IDS);
+  const [first, second] = RECIPES;
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (!hash) return;
+    const el = document.getElementById(hash.slice(1));
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>{CHAPTER.title} — AIBook.fun reading demo</title>
+        <meta name="description" content={CHAPTER.promise} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <ReaderNav chapterName={CHAPTER.vertical} />
+
+      <div className="chapter-progress" role="status" aria-live="polite">
+        <div className="wrap chapter-progress-in">
+          <span>
+            {count}/{total} Try-its complete
+          </span>
+          <span className="chapter-progress-links">
+            {RECIPES.map((r) => (
+              <a key={r.id} href={`#${r.anchor}`}>
+                {r.id}
+                {complete[r.id] ? " · done" : ""}
+              </a>
+            ))}
+          </span>
+        </div>
+      </div>
+
+      <main>
+        <article className="chapter-page">
+          <div className="wrap">
+            <div className="chapter-col">
+              <span className="spec demo-chip">Reading demo · not the live book</span>
+              <p className="spec chapter-kicker">
+                {CHAPTER.vertical} · {CHAPTER.edition} edition
+              </p>
+              <h1 className="chapter-title">{CHAPTER.title}</h1>
+              <p className="chapter-by">{CHAPTER.authors}</p>
+
+              <p className="chapter-promise">{CHAPTER.promise}</p>
+
+              <div className="skip-row">
+                <span className="skip-label">Skip to a Try-it</span>
+                {CHAPTER.skip.map((s) => (
+                  <a key={s.id} className="skip-chip" href={s.href}>
+                    {s.id}
+                    <span className="skip-chip-job">{s.title}</span>
+                  </a>
+                ))}
+              </div>
+
+              <Essay heading={CHAPTER.stakes.heading} paragraphs={CHAPTER.stakes.paragraphs} />
+              <Essay
+                heading={CHAPTER.constraints.heading}
+                paragraphs={CHAPTER.constraints.paragraphs}
+              />
+              <Essay heading={CHAPTER.practice.heading} paragraphs={CHAPTER.practice.paragraphs} />
+
+              <WorkflowBlock
+                recipe={first}
+                complete={!!complete[first.id]}
+                onToggleComplete={toggle}
+              />
+
+              <Essay heading={CHAPTER.between.heading} paragraphs={CHAPTER.between.paragraphs} />
+
+              <WorkflowBlock
+                recipe={second}
+                complete={!!complete[second.id]}
+                onToggleComplete={toggle}
+              />
+
+              <section className="end-matter">
+                <h2>Further workflows in this vertical</h2>
+                <ul className="further-list">
+                  {CHAPTER.further.map((item) => (
+                    <li key={item.id}>
+                      {item.coming ? (
+                        <>
+                          <span className="recipe-id">
+                            <b>{item.id}</b>
+                          </span>{" "}
+                          {item.title}
+                        </>
+                      ) : (
+                        <>
+                          <a href={item.href}>
+                            <span className="recipe-id">
+                              <b>{item.id}</b>
+                            </span>
+                          </a>{" "}
+                          {item.title}
+                        </>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+
+                <h2>Sources</h2>
+                <ul className="further-list">
+                  {CHAPTER.sources.map((s) => (
+                    <li key={s}>{s}</li>
+                  ))}
+                </ul>
+
+                <p className="chapter-updated">Last updated: {CHAPTER.lastUpdated}</p>
+              </section>
+            </div>
+          </div>
+        </article>
+      </main>
+      <ReaderFooter />
+    </>
+  );
+}