Function SplitFigure

packages/react/src/components/artifact-preview.tsx:256–298

A list beside a panel: the shape of a detail or explorer artifact.

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

/** A list beside a panel: the shape of a detail or explorer artifact. */
function SplitFigure(props: { readonly next: () => number }) {
  const { next } = props;
  const railWidth = 96;
  const panelX = PAD + railWidth + 14;
  const panelWidth = WIDTH - PAD - panelX;
  const panelHeight = HEIGHT - PAD - BODY_TOP;
  const points = Array.from({ length: 7 }, (_, index) => {
    const x = panelX + 12 + (index * (panelWidth - 24)) / 6;
    const y = BODY_TOP + panelHeight - 16 - between(next, 6, panelHeight - 40);
    return `${x},${y}`;
  }).join(" ");

  return (
    <>
      {Array.from({ length: 4 }, (_, index) => (
        <Block
          key={index}
          x={PAD}
          y={BODY_TOP + index * 22}
          width={between(next, 52, railWidth)}
          height={8}
          className={index === 0 ? "fill-muted-foreground/35" : undefined}
        />
      ))}
      <rect
        x={panelX}
        y={BODY_TOP}
        width={panelWidth}
        height={panelHeight}
        rx={4}
        className="fill-transparent stroke-border"
        strokeWidth={1}
      />
      <polyline
        points={points}
        className="fill-none stroke-muted-foreground/50"
        strokeWidth={1.5}
        strokeLinejoin="round"
        strokeLinecap="round"
      />
    </>
  );
}

const FIGURES = [BarsFigure, RowsFigure, TilesFigure, SplitFigure] as const;