Function TilesFigure

packages/react/src/components/artifact-preview.tsx:213–253

A tile grid: the shape of a stat or summary dashboard.

(props: { readonly next: () => number })

/** A tile grid: the shape of a stat or summary dashboard. */
function TilesFigure(props: { readonly next: () => number }) {
  const { next } = props;
  const columns = 2;
  const rows = 2;
  const gap = 12;
  const tileWidth = (WIDTH - PAD * 2 - gap * (columns - 1)) / columns;
  const tileHeight = (HEIGHT - PAD - BODY_TOP - gap * (rows - 1)) / rows;

  return (
    <>
      {Array.from({ length: columns * rows }, (_, index) => {
        const column = index % columns;
        const row = Math.floor(index / columns);
        const x = PAD + column * (tileWidth + gap);
        const y = BODY_TOP + row * (tileHeight + gap);
        const valueWidth = between(next, 28, 54);
        return (
          <g key={index}>
            <rect
              x={x}
              y={y}
              width={tileWidth}
              height={tileHeight}
              rx={4}
              className="fill-transparent stroke-border"
              strokeWidth={1}
            />
            <Block x={x + 12} y={y + 14} width={between(next, 30, 46)} height={6} />
            <Block
              x={x + 12}
              y={y + 28}
              width={valueWidth}
              height={11}
              className="fill-muted-foreground/35"
            />
          </g>
        );
      })}
    </>
  );
}

/** A list beside a panel: the shape of a detail or explorer artifact. */
function SplitFigure(props: { readonly next: () => number }) {