36 lines
1.3 KiB
React
36 lines
1.3 KiB
React
export default function WorkflowRail({ recipes, complete = {}, total }) {
|
|
return (
|
|
<aside className="chapter-rail" aria-label="Workflows in this chapter">
|
|
<p className="spec">Workflows in this chapter</p>
|
|
<ol className="rail-list">
|
|
{recipes.map((r, i) => {
|
|
const done = !!complete[r.id];
|
|
return (
|
|
<li key={r.id}>
|
|
<a className={`rail-card${done ? " is-done" : ""}`} href={`#${r.anchor}`}>
|
|
<span className="rail-kicker">
|
|
{i + 1} of {total} · {r.id}
|
|
</span>
|
|
<span className="rail-title">{r.shortTitle}</span>
|
|
<span className="rail-meta">
|
|
{r.time} · {r.cost}
|
|
{done ? " · done" : ""}
|
|
</span>
|
|
{r.kit && r.kit.tools && r.kit.tools.length ? (
|
|
<span className="rail-kit">{r.kit.tools.join(" · ")}</span>
|
|
) : null}
|
|
{r.kit && r.kit.artifact ? (
|
|
<span className="rail-kit rail-out">{r.kit.artifact}</span>
|
|
) : null}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
<a className="rail-skip" href={`#${recipes[0]?.anchor}-tryit`}>
|
|
Skip to the first Try-it
|
|
</a>
|
|
</aside>
|
|
);
|
|
}
|