PersonCard
One protected person in the Família list and detail (Figma "Person Card" 2024:2880): avatar, name, protection status, the reason in one or two lines, the last check and an optional action.
The home uses Person Tile; this card is the calmer summary. Long copy clamps instead of squeezing. It never shows message counts or conversation content.
<PersonCard status="disconnected" name="Marlene" relation="Sua sogra · 76 anos" reason="O WhatsApp desconectou ontem às 22:10" action={<Button variant="outline" size="40">Ver como reconectar</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
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).
Status · Protegendo
| Person Card |
|---|
LA ProtegendoLiaSua filha · 14 anos Nenhum alerta aberto. Tudo calmo hoje. a Dinda checou hoje às 14:08 · WhatsApp conectado |
Status · Precisa de você
| Person Card |
|---|
LA Precisa de vocêLiaSua filha · 14 anos Chegou um alerta hoje às 14:02. Vale conversar com ela hoje. a Dinda checou hoje às 14:08 · WhatsApp conectado |
Status · Conectando
| Person Card |
|---|
LA ConectandoLiaSua filha · 14 anos A Lia aceitou. Falta conectar o WhatsApp dela. pedido aceito hoje às 10:40 |
Status · Sem conexão
| Person Card |
|---|
LA Sem conexãoLiaSua filha · 14 anos O WhatsApp da Lia desconectou ontem às 22:10. última checagem ontem às 22:08 |
Status · Pausado
| Person Card |
|---|
LA PausadaLiaSua filha · 14 anos Pausada até amanhã, 19/10, às 14:30. WhatsApp conectado · checagem pausada |
Status · Parou
| Person Card |
|---|
LA ParouLiaSua filha · 14 anos A Lia pediu pra parar em 12/10. A vaga ficou livre. o aceite é apagado em 30 dias |
Status · Não aceitou
| Person Card |
|---|
LA Não aceitouLiaSua filha · 14 anos A Lia não aceitou por enquanto. Nada foi ativado. pedido enviado em 10/10 |
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 |
|---|---|---|---|
| status | PersonCardStatus | — | Figma "Status": icon + word, never colour alone. |
| statusLabel? | string | — | Replaces the status word, e.g. "Pausado" for a man. |
| name | string | — | Figma "Name". |
| headingLevel? | 2 | 3 | 4 | 3 | Outline level of the name inside a list (3 under "Família"). |
| avatar? | ReactNode | — | An Avatar.Root (Warm tone for the people you protect). |
| relation? | string | — | The relation line under the name, "Sua filha · 14 anos". |
| reason? | string | — | Why the card says what it says: "O WhatsApp desconectou ontem às 22:10". |
| lastCheck? | string | — | When the Dinda last checked, "a Dinda checou hoje às 14:08". |
| connection? | string | — | Connection line, "WhatsApp conectado". |
| action? | ReactNode | — | Figma "Show action": a Button (or a link styled as one). |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Another element keeps the look, e.g. `render={<li />}`. |
| className? | string | — |
StatusPanel
The lifecycle card on a person's page (Figma "Status Panel" 2130:12171): Paused (muted), Connection (attention: the WhatsApp disconnected), Renewal (consent renewal), Stopped (the person asked to stop), Info (how it works) and Reconnected.
RecipientRow
One person who receives the alerts (Figma "Recipient Row" 2130:11917): avatar, name and what they receive.