fix(reader): use full chapter width with workflow rail

2026-09-01 03:49:21 +00:00
parent 3f32886894
commit f47b42e4a5
1 changed files with 29 additions and 0 deletions
@@ -0,0 +1,29 @@
+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>
+              </a>
+            </li>
+          );
+        })}
+      </ol>
+      <a className="rail-skip" href={`#${recipes[0]?.anchor}-tryit`}>
+        Skip to the first Try-it
+      </a>
+    </aside>
+  );
+}