PeerSelection
An outline with a name flag, for a whole object another person has selected.
SourcePackage @kerf-js/veneer
Preview
tsx
import { PeerSelection, Text } from '@kerf-js/veneer'import type { Peer } from '@kerf-js/veneer'export function PeerSelectionText() { return ( <Text> The stale window is{' '} <PeerSelection peer={JUN}>{time}</PeerSelection> on every region. </Text> )}const PEOPLE = [ { id: 'mara', name: 'Mara Lindqvist', email: 'mara@kerf.dev', role: 'Owner', team: 'Platform', initials: 'ML', }, { id: 'jun', name: 'Jun Tanaka', email: 'jun@kerf.dev', role: 'Admin', team: 'Platform', initials: 'JT', }, { id: 'priya', name: 'Priya Raman', email: 'priya@kerf.dev', role: 'Member', team: 'Web', initials: 'PR', }, { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@kerf.dev', role: 'Member', team: 'Web', initials: 'TO', }, { id: 'lena', name: 'Lena Fischer', email: 'lena@kerf.dev', role: 'Member', team: 'Data', initials: 'LF', }, { id: 'noor', name: 'Noor Haddad', email: 'noor@kerf.dev', role: 'Viewer', team: 'Data', initials: 'NH', }, { id: 'sam', name: 'Sam Okafor', email: 'sam@kerf.dev', role: 'Member', team: 'Mobile', initials: 'SO', }, { id: 'ines', name: 'Inés Vidal', email: 'ines@kerf.dev', role: 'Viewer', team: 'Mobile', initials: 'IV', },]const PEERS: Peer[] = PEOPLE.map((p, i) => ({ id: p.id, name: p.name, color: i + 1,}))const [ MARA, JUN, PRIYA, TOMAS, LENA, NOOR, SAM, INES,] = PEERS as [ Peer, Peer, Peer, Peer, Peer, Peer, Peer, Peer,]const time = '30 seconds'Installation
npm install @kerf-js/veneerUsage
tsx
import { PeerSelection } from '@kerf-js/veneer'<Text> The stale window is{' '} <PeerSelection peer={JUN}>{time}</PeerSelection> on every region.</Text>Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
peer | Peer | — | Whose selection it is. |
children | unknown | — | What it contains. |
RelatedPeer markLocked field