swarm-ui: one subdirectory per ui/ component
Per mara's PR review request: Panel/StatusChip/Table each move into their own subdir (ui/panel/, ui/status-chip/, ui/table/) colocating the component with its stylesheet, matching shell/ (Shell.tsx + Shell.css already lived this way). Import paths in App.tsx and swarm-ui.css updated to match; no behavior change. npm run build + typecheck both clean.
This commit is contained in:
parent
67eb0c660d
commit
55f9e6c15f
8 changed files with 4 additions and 4 deletions
43
frontend/packages/swarm-ui/src/ui/table/Table.tsx
Normal file
43
frontend/packages/swarm-ui/src/ui/table/Table.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
// <Table> — a generic column-defined table, the shape the hive roster
|
||||
// (name / domain / status chip, one row per hive) needs. Columns own
|
||||
// their own cell rendering rather than this component knowing about
|
||||
// any particular row shape, so it stays reusable for the swarm-wide
|
||||
// agent roster later without a rewrite.
|
||||
import type { ComponentChildren } from 'preact';
|
||||
|
||||
export interface TableColumn<T> {
|
||||
key: string;
|
||||
header: string;
|
||||
render: (row: T) => ComponentChildren;
|
||||
}
|
||||
|
||||
export function Table<T>({
|
||||
columns,
|
||||
rows,
|
||||
rowKey,
|
||||
}: {
|
||||
columns: TableColumn<T>[];
|
||||
rows: T[];
|
||||
rowKey: (row: T) => string;
|
||||
}) {
|
||||
return (
|
||||
<table class="ui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{columns.map((c) => (
|
||||
<th key={c.key}>{c.header}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={rowKey(row)}>
|
||||
{columns.map((c) => (
|
||||
<td key={c.key}>{c.render(row)}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue