#246
Without a menu
A three column record list of webhooks with no actions slot, so there is no trailing menu track.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Without a menu" pattern (@codeatlasdev/ui demo #246, layout/record-list) in my app.
Call get_demo({ ids: ["#246"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Read-only lists such as webhook endpoints or logs where rows have facts but no per-row actions.
Keep these library parts, with the props and tokens the demo uses:
- RecordCell, RecordList, RecordRow from "@codeatlasdev/ui"
Behaviour to keep:
- `<RecordList` with `columns="minmax(0,2fr) minmax(0,1.4fr) 5rem"`
- `labels={['Endpoint', 'Events', 'Delivered']}` and `aria-label="Webhooks"`
- 2 rows from `hooks`, each a `<RecordRow>` keyed by `hook.id`
- `{#snippet identity()}` renders the endpoint as `<code>{hook.url}</code>`
- `<RecordCell label="Events">` and `<RecordCell label="Delivered">` follow; the row has no actions snippet and `columns` has no trailing action track
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- RecordCell
@codeatlasdev/ui - RecordList
@codeatlasdev/ui - RecordRow
@codeatlasdev/ui
How it is built
- `<RecordList` with `columns="minmax(0,2fr) minmax(0,1.4fr) 5rem"`
- `labels={['Endpoint', 'Events', 'Delivered']}` and `aria-label="Webhooks"`
- 2 rows from `hooks`, each a `<RecordRow>` keyed by `hook.id`
- `{#snippet identity()}` renders the endpoint as `<code>{hook.url}</code>`
- `<RecordCell label="Events">` and `<RecordCell label="Delivered">` follow; the row has no actions snippet and `columns` has no trailing action track
Related
Loading source.