app/components/phage-roster.tsx

Functions

Imports

It imports app/lib/roster/compile.mjs. Imported by app/routes/content-page.tsx.

Source

1import type { Cohort } from "~/lib/roster/compile.mjs";
2
3/**
4 * The year-by-year roster, drawn from the roster table (docs/ROSTER.md). Photos and names only. The heading's id
5 * is the /phage-discovery anchor (ROSTER_ANCHOR in app/lib/roster/compile.mjs, a literal here because
6 * check:links reads the static id).
7 */
8export function PhageRoster({ cohorts }: { cohorts: Cohort[] }) {
9  return (
10    <section aria-labelledby="roster">
11      <h2 id="roster">Roster</h2>
12      {cohorts.map((entry, index) => (
13        <section key={entry.year} aria-labelledby={`year-${entry.year}`}>
14          <h3 id={`year-${entry.year}`}>{entry.year}</h3>
15          {entry.photo ? (
16            <figure>
17              <img
18                src={entry.photo.src}
19                width={entry.photo.width}
20                height={entry.photo.height}
21                alt={entry.photo.alt}
22                loading={index === 0 ? "eager" : "lazy"}
23                decoding="async"
24              />
25            </figure>
26          ) : null}
27          {entry.researchers.length > 0 ? (
28            <ul>
29              {entry.researchers.map((name) => (
30                <li key={name}>{name}</li>
31              ))}
32            </ul>
33          ) : (
34            <p className="muted">Roster to be added.</p>
35          )}
36        </section>
37      ))}
38    </section>
39  );
40}