| 1 | import { Plus, X } from "lucide-react"; |
| 2 | |
| 3 | import { type ChartEditorSchema } from "./schemas"; |
| 4 | |
| 5 | interface ToolbarProps { |
| 6 | schema: ChartEditorSchema; |
| 7 | rowCount: number; |
| 8 | seriesCount: number; |
| 9 | hasZColumn: boolean; |
| 10 | onAddRow: () => void; |
| 11 | onAddSeries: () => void; |
| 12 | onAddZColumn: () => void; |
| 13 | onRemoveZColumn: () => void; |
| 14 | } |
| 15 | |
| 16 | export function Toolbar({ |
| 17 | schema, |
| 18 | rowCount, |
| 19 | seriesCount, |
| 20 | hasZColumn, |
| 21 | onAddRow, |
| 22 | onAddSeries, |
| 23 | onAddZColumn, |
| 24 | onRemoveZColumn, |
| 25 | }: ToolbarProps) { |
| 26 | return ( |
| 27 | <div className="flex items-center justify-between gap-3 rounded-md border border-border bg-muted/40 px-3 py-2"> |
| 28 | <div className="flex min-w-0 items-center gap-3 text-xs text-muted-foreground"> |
| 29 | <span className="shrink-0 tabular-nums">{rowCount} rows</span> |
| 30 | {schema.supportsSeries && ( |
| 31 | <> |
| 32 | <span className="shrink-0 text-border">/</span> |
| 33 | <span className="shrink-0 tabular-nums">{seriesCount} series</span> |
| 34 | </> |
| 35 | )} |
| 36 | <span className="hidden min-w-0 truncate text-muted-foreground/80 md:inline"> |
| 37 | {schema.description} |
| 38 | </span> |
| 39 | </div> |
| 40 | |
| 41 | <div className="flex shrink-0 items-center gap-1"> |
| 42 | {schema.mode === "xy" && ( |
| 43 | <button |
| 44 | onClick={hasZColumn ? onRemoveZColumn : onAddZColumn} |
| 45 | className="flex h-7 items-center gap-1.5 rounded px-2.5 text-xs font-medium transition-colors hover:bg-accent" |
| 46 | type="button" |
| 47 | > |
| 48 | {hasZColumn ? ( |
| 49 | <> |
| 50 | <X className="size-3.5" /> |
| 51 | <span>Remove Z</span> |
| 52 | </> |
| 53 | ) : ( |
| 54 | <> |
| 55 | <Plus className="size-3.5" /> |
| 56 | <span>Add Z</span> |
| 57 | </> |
| 58 | )} |
| 59 | </button> |
| 60 | )} |
| 61 | |
| 62 | {schema.supportsSeries && ( |
| 63 | <button |
| 64 | onClick={onAddSeries} |
| 65 | className="flex h-7 items-center gap-1.5 rounded px-2.5 text-xs font-medium transition-colors hover:bg-accent" |
| 66 | type="button" |
| 67 | > |
| 68 | <Plus className="size-3.5" /> |
| 69 | <span>Add Series</span> |
| 70 | </button> |
| 71 | )} |
| 72 | |
| 73 | <div className="mx-1 h-4 w-px bg-border" /> |
| 74 | |
| 75 | <button |
| 76 | onClick={onAddRow} |
| 77 | className="flex h-7 items-center gap-1.5 rounded bg-primary/10 px-2.5 text-xs font-medium text-primary transition-colors hover:bg-primary/20" |
| 78 | type="button" |
| 79 | > |
| 80 | <Plus className="size-3.5" /> |
| 81 | <span>Add Row</span> |
| 82 | </button> |
| 83 | </div> |
| 84 | </div> |
| 85 | ); |
| 86 | } |
| 87 |