components/draft-compare/examples.tsx

Functions

Imports

It imports components/draft-compare/draft-compare.react.tsx, components/draft-compare/draft-compare.ts. No module of this repo imports it.

Source

1// Mounts the React specimen: the compare with its view held in the app's own state, and the
2// view named beside it so a test can read what the app was told.
3import { StrictMode, useState } from "react";
4import { createRoot } from "react-dom/client";
5import { DraftCompare } from "./draft-compare.react.tsx";
6import type { CompareView } from "./draft-compare.ts";
7
8const before = { title: "Draft 5", who: "Dustin Edwards", time: "2026-09-30T08:00:00Z", text: "The deploy job runs at six. It posts a note to the feed when it finishes. A failed run pages nobody." };
9const after = { title: "Draft 6", who: "Dustin Edwards", time: "2026-09-30T08:25:00Z", text: "The deploy job runs at seven. It posts a note to the feed when it finishes. A failed run pages nobody, and says why." };
10
11function Held() {
12  const [view, setView] = useState<CompareView>("inline");
13  return (
14    <>
15      <DraftCompare before={before} after={after} view={view} onViewChange={setView} id="cmp-react" />
16      <p className="cap-muted" data-view-chosen={view}>
17        The app holds the view: {view}
18      </p>
19    </>
20  );
21}
22
23for (const el of document.querySelectorAll<HTMLElement>("[data-mount='react']")) {
24  createRoot(el).render(
25    <StrictMode>
26      <Held />
27    </StrictMode>,
28  );
29}