app/components/protocol-workflow.tsx

Functions

Imports

It imports app/kb/procedures/library.mjs. Imported by app/components/procedure.tsx.

Source

1import type { workflowContext } from "~/kb/procedures/library.mjs";
2
3/**
4 * Where a protocol sits in the phage workflow: the stage, the protocols before and after it, and the calculators used at
5 * that stage. Drawn from the same context the markdown twin lists (app/kb/procedures/library.mjs), as plain links, so it
6 * works with no script. Nothing renders for a protocol outside the workflow.
7 */
8export function ProtocolWorkflow({ context }: { context: ReturnType<typeof workflowContext> }) {
9  if (!context) return null;
10  return (
11    <nav className="procedure-workflow" aria-label="In the phage workflow">
12      <p className="procedure-workflow-stage">
13        In the phage workflow: <strong>{context.stage}</strong>
14      </p>
15      <dl className="procedure-workflow-links">
16        {context.before.length > 0 ? (
17          <>
18            <dt>Before this</dt>
19            <dd>
20              {context.before.map((p) => (
21                <a key={p.href} href={p.href}>
22                  {p.title}
23                </a>
24              ))}
25            </dd>
26          </>
27        ) : null}
28        {context.after.length > 0 ? (
29          <>
30            <dt>After this</dt>
31            <dd>
32              {context.after.map((p) => (
33                <a key={p.href} href={p.href}>
34                  {p.title}
35                </a>
36              ))}
37            </dd>
38          </>
39        ) : null}
40        {context.tools.length > 0 ? (
41          <>
42            <dt>Calculators</dt>
43            <dd>
44              {context.tools.map((t) => (
45                <a key={t.id} href={t.href}>
46                  {t.label}
47                </a>
48              ))}
49            </dd>
50          </>
51        ) : null}
52      </dl>
53    </nav>
54  );
55}