61 lines
1.5 KiB
React
61 lines
1.5 KiB
React
import { collectChapterKit } from "../../data/sample-chapter";
|
|
|
|
export default function ChapterKit({ recipes }) {
|
|
const kit = collectChapterKit(recipes);
|
|
if (!kit.tools.length && !kit.files.length) return null;
|
|
|
|
return (
|
|
<section className="chapter-kit" id="need" aria-label="What you need">
|
|
<h2 className="chapter-kit-title">What you need</h2>
|
|
<p className="chapter-kit-lede">
|
|
{recipes.length} Try-it{recipes.length === 1 ? "" : "s"} on sample data. Nothing
|
|
from a live client file.
|
|
</p>
|
|
<dl className="kit-grid">
|
|
<div>
|
|
<dt>Tools</dt>
|
|
<dd>
|
|
<ul>
|
|
{kit.tools.map((t) => (
|
|
<li key={t}>{t}</li>
|
|
))}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Files</dt>
|
|
<dd>
|
|
<ul>
|
|
{kit.files.map((f) => (
|
|
<li key={f}>{f}</li>
|
|
))}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Model</dt>
|
|
<dd>
|
|
<ul>
|
|
{kit.models.map((m) => (
|
|
<li key={m}>{m}</li>
|
|
))}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Try-its</dt>
|
|
<dd>
|
|
<ul>
|
|
{kit.tryits.map((t) => (
|
|
<li key={t.id}>
|
|
{t.id} · {t.time} · {t.cost}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
);
|
|
}
|