#126
In a results table
A table of three domains where each row ends with an ExternalLink to a registrar URL.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "In a results table" pattern (@codeatlasdev/ui demo #126, display/external-link) in my app.
Call get_demo({ ids: ["#126"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Table cells that link out to a third-party site, with the external-link affordance.
Keep these library parts, with the props and tokens the demo uses:
- ExternalLink, SimpleTable, Card from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card flush full>` wraps `<SimpleTable responsive="cards">`
- `const rows` has 3 entries with `domain`, `price` and `url`
- Header cells are Domain, Price and Registrar
- `<ExternalLink href={r.url}>Buy at registrar</ExternalLink>` is rendered in each last cell
- `{#each rows as r (r.domain)}` renders one `<tr>` per row
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- ExternalLink
@codeatlasdev/ui - SimpleTable
@codeatlasdev/ui - Card
@codeatlasdev/ui
How it is built
- `<Card flush full>` wraps `<SimpleTable responsive="cards">`
- `const rows` has 3 entries with `domain`, `price` and `url`
- Header cells are Domain, Price and Registrar
- `<ExternalLink href={r.url}>Buy at registrar</ExternalLink>` is rendered in each last cell
- `{#each rows as r (r.domain)}` renders one `<tr>` per row
Related
Loading source.