app/components/writing/status-label.tsx

Functions

Imports

It imports app/lib/writing/status.ts. Imported by app/routes/book.corkboard.tsx, app/routes/book.outliner.tsx, app/routes/book.tsx.

Source

1// A file's status as the project's list names it: the label's word with its color as a dot beside
2// it, so the word carries the meaning and the color only repeats it. A value the list does not carry
3// is shown as written, in a neutral outline pill; an empty one shows nothing.
4
5import { Pill } from "capsomer/react/status";
6
7import { labelFor, type StatusLabel } from "~/lib/writing/status";
8
9export function StatusLabelPill({ labels, status }: { labels: StatusLabel[]; status: string }) {
10  if (!status.trim()) return null;
11  const label = labelFor(labels, status);
12  if (!label) {
13    return (
14      <Pill variant="outline">
15        {status.trim()}
16        <span className="cap-sr-only"> (not on the status list)</span>
17      </Pill>
18    );
19  }
20  return (
21    <span className="app-label" data-color={label.color}>
22      <span className="app-label-dot" aria-hidden="true" />
23      {label.label}
24    </span>
25  );
26}