Protection
PersonTile
One person on the Farol home (Figma "Person Tile" 2056:44857): the figure on the state colour with a white pill holding the name and the protection status (icon + word).
The whole tile is the link to the person page. Inside the Mural use Mural.Person, which takes the same props. Desktop is 300 px square, Phone 238 px.
<PersonTile audience="teen" state="protecting" name="Lia" href="/familia/lia" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Person Tile
string
string
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).
Audience · Teen
| Size | Protegendo | Precisa de você | Sem conexão | Pausada | Esperando |
|---|---|---|---|---|---|
| Desktop | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
| Phone | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
Audience · Elder woman
| Size | Protegendo | Precisa de você | Sem conexão | Pausada | Esperando |
|---|---|---|---|---|---|
| Desktop | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
| Phone | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
Audience · Elder man
| Size | Protegendo | Precisa de você | Sem conexão | Pausada | Esperando |
|---|---|---|---|---|---|
| Desktop | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
| Phone | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
Audience · Adult
| Size | Protegendo | Precisa de você | Sem conexão | Pausada | Esperando |
|---|---|---|---|---|---|
| Desktop | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
| Phone | LiaProtegendo | LiaPrecisa de você | LiaSem conexão | LiaPausada | LiaEsperando |
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 |
|---|---|---|---|
| audience | Audience | — | Figma "Audience": which figure the tile shows. |
| state | PersonTileState | — | Figma "State" (pt-BR → English: Protegendo → protecting, Precisa de você → needs-you, Sem conexão → disconnected, Pausada → paused, Esperando → waiting). |
| name | string | — | Figma "name": the person's first name. |
| statusLabel? | string | — | Replaces the status word in the pill, e.g. "Ainda não abriu" while waiting. The state glyph stays. |
| size? | "desktop" | "phone" | null | "desktop" | |
| showChevron? | boolean | true | Figma "showChevron": the tile opens the person page. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The router's link, e.g. `render={<NextLink href="/familia/lia" />}`. |
| className? | string | — |