92 lines
3.0 KiB
React
92 lines
3.0 KiB
React
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import ReaderNav from "../../../components/reader/ReaderNav";
|
|
import ReaderCrumbs from "../../../components/reader/ReaderCrumbs";
|
|
import ReaderFooter from "../../../components/reader/ReaderFooter";
|
|
import WorkflowBlock from "../../../components/reader/WorkflowBlock";
|
|
import useActivation from "../../../components/reader/useActivation";
|
|
import { RECIPES, 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 here="chapter" />
|
|
<main>
|
|
<div className="wrap reader-wide 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 reader-wide 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-01 and RE-02, 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 here="chapter" />
|
|
<main>
|
|
<div className="wrap reader-wide recipe-focus-page">
|
|
<ReaderCrumbs
|
|
items={[
|
|
{ href: "/read", label: "Library" },
|
|
{ href: "/read/real-estate", label: "Real Estate" },
|
|
{ label: recipe.id, current: true },
|
|
]}
|
|
/>
|
|
<span className="spec demo-chip">Reading demo · not the live book</span>
|
|
<p className="spec chapter-kicker">Print / focus view</p>
|
|
<WorkflowBlock
|
|
recipe={recipe}
|
|
index={Math.max(RECIPES.findIndex((r) => r.id === recipe.id) + 1, 1)}
|
|
total={RECIPES.length}
|
|
complete={!!complete[recipe.id]}
|
|
onToggleComplete={toggle}
|
|
focused
|
|
/>
|
|
</div>
|
|
</main>
|
|
<ReaderFooter />
|
|
</>
|
|
);
|
|
}
|