8642d4acf6
Per mara's review question on PR#3219 ('shouldnt the jsx files import
their css?'): each component now does its own import ('./Shell.css',
'./Panel.css', ...) instead of swarm-ui.css centrally @import-ing
every component's stylesheet. esbuild folds every .css reachable from
main.tsx's import graph into one main.css companion output next to
main.js — no separate build step, this is bundle:true's existing
behavior, just not exercised until now.
swarm-ui.css keeps only the shared base reset (@hive/shared/base.css)
since that isn't any one component's concern. Added src/css.d.ts
(ambient '*.css' module) since tsc otherwise rejects a side-effect
import of a non-JS/TS specifier.
Side benefit: a component nothing imports (yet) no longer ships its
CSS either — StatusChip/Table aren't referenced from App.tsx today,
and main.css correctly only carries Shell.css + Panel.css. The old
central-import approach shipped all four unconditionally.
npm run build + typecheck clean. Re-screenshotted the real dist —
pixel-identical to before this change.
44 lines
1 KiB
TypeScript
44 lines
1 KiB
TypeScript
// <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';
|
|
import './Table.css';
|
|
|
|
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>
|
|
);
|
|
}
|