A table: the shape of a list or report artifact.
(props: { readonly next: () => number })
| 172 | |
| 173 | /** A table: the shape of a list or report artifact. */ |
| 174 | function RowsFigure(props: { readonly next: () => number }) { |
| 175 | const { next } = props; |
| 176 | const rows = between(next, 4, 6); |
| 177 | const rowHeight = (HEIGHT - PAD - BODY_TOP) / rows; |
| 178 | |
| 179 | return ( |
| 180 | <> |
| 181 | {Array.from({ length: rows }, (_, index) => { |
| 182 | const y = BODY_TOP + index * rowHeight; |
| 183 | const leadWidth = between(next, 70, 130); |
| 184 | const tailWidth = between(next, 24, 44); |
| 185 | return ( |
| 186 | <g key={index}> |
| 187 | <Block |
| 188 | x={PAD} |
| 189 | y={y} |
| 190 | width={leadWidth} |
| 191 | height={8} |
| 192 | className={index === 0 ? "fill-muted-foreground/35" : undefined} |
| 193 | /> |
| 194 | <Block x={WIDTH - PAD - tailWidth} y={y} width={tailWidth} height={8} /> |
| 195 | {index < rows - 1 ? ( |
| 196 | <line |
| 197 | x1={PAD} |
| 198 | y1={y + rowHeight - 7} |
| 199 | x2={WIDTH - PAD} |
| 200 | y2={y + rowHeight - 7} |
| 201 | className="stroke-border" |
| 202 | strokeWidth={1} |
| 203 | /> |
| 204 | ) : null} |
| 205 | </g> |
| 206 | ); |
| 207 | })} |
| 208 | </> |
| 209 | ); |
| 210 | } |
| 211 | |
| 212 | /** A tile grid: the shape of a stat or summary dashboard. */ |
| 213 | function TilesFigure(props: { readonly next: () => number }) { |