app/components/library-overview.tsx

Functions

Imports

It imports app/kb/procedures/library.mjs. Imported by app/routes/protocols.tsx.

Source

1import { countOf, overviewSentence, type libraryOverview } from "~/kb/procedures/library.mjs";
2
3/**
4 * The library's overview (docs/PROCEDURES.md): its counts, the phage workflow and a tile for each method, all
5 * counted from the same rows as the catalog beneath it. Plain links, so every tile is also an address of the
6 * filtered library and the whole block works with no script.
7 */
8export function LibraryOverview({ overview }: { overview: ReturnType<typeof libraryOverview> }) {
9  if (overview.total === 0) return null;
10  return (
11    <section className="library-overview" aria-labelledby="library-overview-title">
12      <h2 id="library-overview-title" className="library-overview-title">
13        In the library
14      </h2>
15      <p className="library-counts">{overviewSentence(overview)}</p>
16      {overview.start.length > 0 ? (
17        <>
18          <h3 className="library-subtitle" id="library-start-title">
19            Start here
20          </h3>
21          <ol className="library-start" aria-labelledby="library-start-title">
22            {overview.start.map((p) => (
23              <li key={p.slug}>
24                <a className="library-start-title" href={p.href}>
25                  {p.title}
26                </a>
27                <span className="library-start-why">{p.description}</span>
28              </li>
29            ))}
30          </ol>
31        </>
32      ) : null}
33      <h3 className="library-subtitle" id="library-pipeline-title">
34        The phage workflow
35      </h3>
36      <ol className="library-pipeline" aria-labelledby="library-pipeline-title">
37        {overview.stages.map((stage) => (
38          <li key={stage.id} className="library-stage" data-empty={stage.href ? undefined : ""}>
39            {stage.href ? (
40              <a href={stage.href}>
41                <span className="library-stage-name">{stage.label}</span>
42                <span className="library-stage-n">{countOf(stage.count, ["protocol", "protocols"])}</span>
43              </a>
44            ) : (
45              <span className="library-stage-name">{stage.label}</span>
46            )}
47            {stage.tools.length > 0 ? (
48              <ul className="library-stage-tools" aria-label={`Calculators for ${stage.label}`}>
49                {stage.tools.map((tool) => (
50                  <li key={tool.id}>
51                    <a href={tool.href}>{tool.label}</a>
52                  </li>
53                ))}
54              </ul>
55            ) : null}
56          </li>
57        ))}
58      </ol>
59      {overview.browse.map((group) => (
60        <div key={group.id} className="library-browse">
61          <h3 className="library-subtitle" id={`library-browse-${group.id}`}>
62            {group.title}
63          </h3>
64          <ul className="library-tiles" aria-labelledby={`library-browse-${group.id}`}>
65            {group.tiles.map((tile) => (
66              <li key={tile.id}>
67                <a className="library-tile" href={tile.href}>
68                  <span className="library-tile-name">{tile.label}</span>
69                  <span className="library-tile-n">{countOf(tile.count, ["protocol", "protocols"])}</span>
70                </a>
71                {"about" in tile && typeof tile.about === "string" ? (
72                  <a className="library-tile-about" href={tile.about}>
73                    About the course
74                  </a>
75                ) : null}
76              </li>
77            ))}
78          </ul>
79        </div>
80      ))}
81    </section>
82  );
83}