app/components/lab/lab-ui.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/routes/workspace.inventory.lot.tsx, app/routes/workspace.inventory.tsx, app/routes/workspace.runs.run.tsx, app/routes/workspace.runs.tsx.

Source

1// The small pieces the /lab pages share: a post's result line and a table in Capsomer's scrolling region.
2
3import type { ReactNode } from "react";
4import { Alert } from "capsomer/react/banner";
5
6/** The answer to the last post: a status line when it worked, an alert when it did not. */
7export function Result({ result }: { result?: { ok: boolean; text: string } | null }) {
8  if (!result) return null;
9  return result.ok ? (
10    <p className="cap-muted" role="status">
11      Done: {result.text}
12    </p>
13  ) : (
14    <Alert tone="crit">Not done: {result.text}</Alert>
15  );
16}
17
18/** A table that scrolls on a phone in a labelled, focusable region (DEFAULTS.md). */
19export function LabTable({ label, head, children }: { label: string; head: string[]; children: ReactNode }) {
20  return (
21    <div className="cap-table-wrap" role="region" aria-label={label} tabIndex={0}>
22      <table className="cap-table">
23        <thead>
24          <tr>
25            {head.map((h) => (
26              <th scope="col" key={h}>
27                {h}
28              </th>
29            ))}
30          </tr>
31        </thead>
32        <tbody>{children}</tbody>
33      </table>
34    </div>
35  );
36}