components/empty/empty.react.tsx

Functions

Imports

It imports components/skeleton/skeleton.react.tsx, components/status/status.react.tsx. Imported by components/catalog/catalog.react.tsx, components/media-library/media-library.react.tsx, components/mentions-list/mentions-list.react.tsx, components/posts-list/posts-list.react.tsx.

Source

1import type { ReactNode } from "react";
2import { Glyph } from "../status/status.react.tsx";
3import { Spinner } from "../skeleton/skeleton.react.tsx";
4
5// Spinner and Skeleton moved to components/skeleton in 0.2; still exported here so
6// "capsomer/react/empty" imports keep working.
7export { Skeleton, Spinner, SkeletonBlock } from "../skeleton/skeleton.react.tsx";
8
9export type EmptyKind = "nothing-yet" | "no-match" | "all-clear" | "failed";
10
11export interface EmptyProps {
12  kind: EmptyKind;
13  // nothing-yet: "No sites are watched yet". no-match: "No jobs match “Blocked”".
14  // failed: "Could not load the queue". all-clear: defaults to "All clear".
15  title?: ReactNode;
16  // One plain sentence: how to add the first, what the filter hides, what failed.
17  children?: ReactNode;
18  // nothing-yet: the one way to add the first. no-match: Clear filter. failed: Try again.
19  action?: ReactNode;
20  // An icon in a muted tile above the title (an svg). Decorative: the title says it.
21  icon?: ReactNode;
22  // No edge, for inside a panel or a table that already has one.
23  flush?: boolean;
24}
25
26export function Empty({ kind, title, children, action, icon, flush }: EmptyProps) {
27  let head: ReactNode;
28  if (kind === "all-clear") {
29    head = (
30      <span className="cap-status" data-tone="ok">
31        <Glyph name="ok" />
32        {title ?? "All clear"}
33      </span>
34    );
35  } else if (kind === "failed") {
36    head = (
37      <>
38        <Glyph name="crit" />
39        {title}
40      </>
41    );
42  } else {
43    head = title;
44  }
45  return (
46    <div className="cap-empty" data-kind={kind} data-flush={flush ? "" : undefined} role={kind === "failed" ? "alert" : undefined}>
47      {icon ? (
48        <div className="cap-empty-media" data-variant="icon" aria-hidden="true">
49          {icon}
50        </div>
51      ) : null}
52      <div className="cap-empty-header">
53        <p className="cap-empty-title">{head}</p>
54        {children ? <p className="cap-empty-text">{children}</p> : null}
55      </div>
56      {kind !== "all-clear" && action ? <div className="cap-empty-content">{action}</div> : null}
57    </div>
58  );
59}
60
61export interface WaitProps {
62  label: string;
63  // Over 10 seconds, say how long: "This usually takes about 30 seconds."
64  children: ReactNode;
65}
66
67export function Wait({ label, children }: WaitProps) {
68  return (
69    <div className="cap-empty-wait" aria-busy="true">
70      <Spinner label={label} />
71      <p className="cap-empty-text">{children}</p>
72    </div>
73  );
74}