59 lines
2.3 KiB
React
59 lines
2.3 KiB
React
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import ReaderNav from "../../components/reader/ReaderNav";
|
|
import ReaderFooter from "../../components/reader/ReaderFooter";
|
|
import { LIBRARY, RECIPES } 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="toc-count">{RECIPES.length} workflows</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 />
|
|
</>
|
|
);
|
|
}
|