feat(reader): add print/focus recipe view

2026-08-31 07:33:26 +00:00
parent 6dfa941683
commit aac526f7a1
1 changed files with 88 additions and 0 deletions
@@ -0,0 +1,88 @@
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+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 { RECIPES_BY_ID } from "../../../data/sample-chapter";
+
+export default function RecipeFocus() {
+  const router = useRouter();
+  const raw = typeof router.query.id === "string" ? router.query.id : "";
+  const recipe = RECIPES_BY_ID[raw] || RECIPES_BY_ID[raw.toUpperCase()] || null;
+  const { complete, toggle } = useActivation(recipe ? [recipe.id] : []);
+
+  if (!router.isReady) {
+    return (
+      <>
+        <ReaderNav chapterName="Real Estate" />
+        <main>
+          <div className="wrap recipe-focus-page">
+            <p className="spec">Loading recipe…</p>
+          </div>
+        </main>
+      </>
+    );
+  }
+
+  if (!recipe) {
+    return (
+      <>
+        <Head>
+          <title>Recipe not in this demo — AIBook.fun</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+        </Head>
+        <ReaderNav />
+        <main>
+          <div className="wrap recipe-focus-page">
+            <span className="spec demo-chip">Reading demo · not the live book</span>
+            <h1 className="chapter-title">This recipe is not in the sample.</h1>
+            <p className="library-lede">
+              The demo ships two nested workflows, RE-04 and RE-05, inside the Real
+              Estate chapter.
+            </p>
+            <p>
+              <Link href="/read/real-estate" className="btn btn-primary">
+                Back to the chapter
+              </Link>
+            </p>
+          </div>
+        </main>
+        <ReaderFooter />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Head>
+        <title>
+          {recipe.id} on paper — AIBook.fun reading demo
+        </title>
+        <meta name="description" content={recipe.title} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <ReaderNav chapterName="Real Estate" />
+      <main>
+        <div className="wrap recipe-focus-page">
+          <span className="spec demo-chip">Reading demo · not the live book</span>
+          <p className="spec chapter-kicker">Print / focus view</p>
+          <p className="focus-back">
+            <Link href={`/read/real-estate#${recipe.anchor}`}>← Back to the chapter</Link>
+            {" · "}
+            <Link href="/read">Library</Link>
+          </p>
+          <WorkflowBlock
+            recipe={recipe}
+            complete={!!complete[recipe.id]}
+            onToggleComplete={toggle}
+            focused
+          />
+        </div>
+      </main>
+      <ReaderFooter />
+    </>
+  );
+}