SetupPersonCard
One person during setup and connect (Figma "Setup Person Card" 2137:11156): avatar, name, age and phone, the Protection Status chip, the Progress Track, two lines of status copy and the actions.
Use Person Card once the person is protected. Stacked on phone, Wide on desktop; below ~560 px the Wide row wraps the actions under the copy.
<SetupPersonCard name="Lia" meta="16 anos · (11) 98765-4321" avatarInitials="LA" status={<ProtectionStatus status="awaiting-consent" />} progress={<ProgressTrack step="authorization" status="waiting" />} statusTitle="Esperando a Lia aceitar" statusBody="Mandamos o link às 10:40. Ela ainda não abriu." actions={<Button variant="outline" size="44">Reenviar o link</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Setup Person Card
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Layout · Stacked
| Setup Person Card |
|---|
Lia 16 anos · (11) 98765-4321
Esperando a Lia aceitar Mandamos o link às 10:40. Ela ainda não abriu. |
Layout · Wide
| Setup Person Card |
|---|
Lia 16 anos · (11) 98765-4321
Esperando a Lia aceitar Mandamos o link às 10:40. Ela ainda não abriu. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| layout? | "stacked" | "wide" | "stacked" | Figma Layout: Stacked (phone) or Wide (desktop, copy beside actions). |
| name | string | — | Figma `name` ("Lia"). |
| meta? | string | — | Figma `meta`: age and phone ("16 anos · (11) 98765-4321"). |
| avatarInitials | string | — | Initials in the brand avatar. |
| status? | ReactNode | — | The Protection Status chip (exposed instance in Figma). |
| progress? | ReactNode | — | The Progress Track (Autorização → Conexão → Protegendo). |
| statusTitle | string | — | Figma `statusTitle` ("Esperando a Lia aceitar"). |
| statusBody? | string | — | Figma `statusBody`; its presence is `showStatusBody`. |
| actions? | ReactNode | — | Figma Actions (`showActions`): Outline 44 primary, Ghost 44 secondary. |
| className? | string | — |
SetupDependentRow
One person in the setup list (Figma "Setup Dependent Row" 186:1475): a selectable row with the warm avatar, the name and the status chips.
NotificationShortcutCard
Something useful to do while waiting (Figma "Notification Shortcut Card" 2130:12389): a bell tile, two lines and a shortcut to the notification settings.