components/flag-list/examples.tsx

Functions

Imports

It imports components/flag-list/flag-list.react.tsx. No module of this repo imports it.

Source

1// Mounts the React specimen: the same list drawn by <FlagList>, holding its own flags and the
2// draft text, as an app's editor page would.
3import { StrictMode, useState } from "react";
4import { createRoot } from "react-dom/client";
5import { FlagList, type FlagData } from "./flag-list.react.tsx";
6
7const TEXT = "The watcher checks 9 sites. Most failures last under a minute. Teh rest need a person.";
8
9const FLAGS: FlagData[] = [
10  { id: "r1", kind: "blocking", state: "open", message: "Most failures: no figure", cause: "A claim of degree needs a number.", raisedBy: "Sources check", anchor: { id: "react-draft", quote: "Most failures last under a minute" } },
11  { id: "r2", kind: "advisory", state: "open", message: "Spelling: Teh", cause: "Words are spelt as the dictionary spells them.", raisedBy: "Spelling check", anchor: { id: "react-draft", quote: "Teh rest" }, suggestion: { replacement: "The rest", by: "Spelling check" } },
12  { id: "r3", kind: "advisory", state: "resolved", resolution: "resolved", resolvedBy: "Rosa Park", resolvedAt: "2026-10-02T07:30:00Z", message: "Number of sites differs from the sites page", cause: "Numbers agree with the page they name.", anchor: { id: "react-draft", quote: "9 sites" } },
13];
14
15function Held() {
16  const [text, setText] = useState(TEXT);
17  return (
18    <>
19      <div className="cap-field">
20        <label className="cap-label" htmlFor="react-draft">
21          Draft text
22        </label>
23        <textarea className="cap-input" id="react-draft" rows={3} value={text} onChange={(e) => setText(e.target.value)} />
24      </div>
25      <FlagList label="Flags on this draft (React)" flags={FLAGS} text={text} onTextChange={setText} owner ownerName="Dustin Edwards" viewer="Dustin Edwards" />
26    </>
27  );
28}
29
30for (const el of document.querySelectorAll<HTMLElement>("[data-mount='react']")) {
31  createRoot(el).render(
32    <StrictMode>
33      <Held />
34    </StrictMode>,
35  );
36}