A record’s people in a context panel: each person as a row with their photo, name, job title and role. A meeting’s attendees use it too.
Installation
import { People } from "@o/pipeline/experimental/blocks/people";Usage
Pass the people as items, in order. Each row shows the person’s image (their initials until it loads, or without one), their name, then their job title and role as secondary text, which truncates before the name does.
Give each person a link (the app’s router link) and the whole row opens it. The action, such as a ”…” menu, shows while the row is hovered or holds focus, and sits above the link. renderRow wraps the row, such as in a context-menu trigger, so a right-click opens the same menu.
Folded
The block starts folded: its header shows up to six faces, then how many more, and no count. Open, the count shows and the faces don’t. The faces are part of the fold, not controls of their own. open, defaultOpen and onOpenChange control it, and the block stores nothing, so the app persists it.
Static
A person without a link is a static row: it doesn’t respond to hover or press, and its action still opens. Give it a title such as “Attendees” for a meeting.
Empty
With no people, the block is one row: its title, a placeholder, and the + when onAdd is passed.
See all
With seeAll, the block shows limit rows (4 by default), and with more, “See all” calls onSeeAll, where the app opens the full list.
Loading
A loading block is the block itself inside a loading SkeletonGroup, with placeholder rows; the faces wait until the people are known.
Person row
PersonRow is one person’s row on its own, for blocks that list people beside other records.
import { PersonRow } from "@o/pipeline/experimental/blocks/people";