Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1x 242x | "use client";
/**
* Expand / collapse controls and the row counter (SPEC.md ยง3.5).
*
* The row counter is the package's own proof: "1,048,578 rows" next to a
* viewport holding thirty of them is the differentiator, stated in the UI.
*/
import styles from "./styles/JsonViewer.module.scss";
export interface ToolbarProps {
rowCount: number;
onExpandAll: () => void;
onCollapseAll: () => void;
onCopyAll: () => void;
children?: React.ReactNode;
}
export function Toolbar({
rowCount,
onExpandAll,
onCollapseAll,
onCopyAll,
children,
}: ToolbarProps) {
return (
<div className={styles.toolbar}>
<button
type="button"
className={styles.button}
onClick={onExpandAll}
data-testid="json-expand-all"
>
Expand all
</button>
<button
type="button"
className={styles.button}
onClick={onCollapseAll}
data-testid="json-collapse-all"
>
Collapse all
</button>
<button type="button" className={styles.button} onClick={onCopyAll}>
Copy JSON
</button>
{children}
<span className={styles.spacerFlex} />
<span className={styles.count} data-testid="json-row-count">
{`${rowCount.toLocaleString()} ${rowCount === 1 ? "row" : "rows"}`}
</span>
</div>
);
}
|