Skip to content
kerfjsGitHub

SectionPeers

Small avatars beside a heading, showing who is reading that section.

SourcePackage @kerf-js/veneer

Preview

tsx
import {  Heading,  Row,  SectionPeers,  Stack} from '@kerf-js/veneer'import type { Peer } from '@kerf-js/veneer'export function SectionPeersHeading() {  return (  <Stack gap="related">    <Row gap="related">      <Heading level={3}>When to roll back</Heading>      <SectionPeers peers={IN_CHANNEL} />    </Row>    <Row gap="related">      <Heading level={3}>Who to tell</Heading>      <SectionPeers peers={ONE_READER} />    </Row>  </Stack>  )}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 IN_CHANNEL = [SAM, JUN, LENA]const ONE_READER = [PRIYA]

Installation

npm install @kerf-js/veneer

Usage

tsx
import { SectionPeers } from '@kerf-js/veneer'<Stack gap="related">  <Row gap="related">    <Heading level={3}>When to roll back</Heading>    <SectionPeers peers={IN_CHANNEL} />  </Row>  <Row gap="related">    <Heading level={3}>Who to tell</Heading>    <SectionPeers peers={ONE_READER} />  </Row></Stack>

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

PropTypeDefaultDescription
peersLive<Peer[]>—Who is here.

RelatedViewport railPresence stack