* The header every artifact has: a title bar and a couple of controls. * * Keeping it constant across layouts is what makes the four body figures read * as variations of one interface rather than four unrelated drawings.
(props: { readonly next: () => number })
| 123 | * as variations of one interface rather than four unrelated drawings. |
| 124 | */ |
| 125 | function Chrome(props: { readonly next: () => number }) { |
| 126 | const titleWidth = between(props.next, 64, 120); |
| 127 | return ( |
| 128 | <> |
| 129 | <Block x={PAD} y={22} width={titleWidth} height={9} className="fill-muted-foreground/35" /> |
| 130 | <Block x={WIDTH - PAD - 44} y={23} width={20} height={7} /> |
| 131 | <Block x={WIDTH - PAD - 20} y={23} width={20} height={7} /> |
| 132 | </> |
| 133 | ); |
| 134 | } |
| 135 | |
| 136 | /** A bar chart: the shape of a metrics artifact. */ |
| 137 | function BarsFigure(props: { readonly next: () => number }) { |