DindaPanel
The first-day purple panel on the home (Figma "Dinda Panel" 2130:10991): the Dinda says what she is doing now, with an optional status line and a Tile.
Use once per page, never for alerts. Brand-foreground on brand passes AA. The status spinner turns only without reduced motion.
<DindaPanel overline="Primeiro dia" title="A Dinda está entendendo o contexto das últimas semanas." status="Pronto por volta das 19:00" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Dinda Panel
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).
Size · Desktop
| Dinda Panel |
|---|
Primeiro dia A Dinda está entendendo o contexto das últimas semanas.Isso leva algumas horas. Você não precisa fazer nada, e nenhuma conversa fica visível pra você. Pronto por volta das 19:00 |
Size · Phone
| Dinda Panel |
|---|
Primeiro dia A Dinda está entendendo o contexto das últimas semanas.Isso leva algumas horas. Você não precisa fazer nada, e nenhuma conversa fica visível pra você. Pronto por volta das 19:00 |
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 |
|---|---|---|---|
| size? | "desktop" | "phone" | null | "desktop" | |
| overline? | string | — | Figma "overline", "Primeiro dia". |
| title | string | — | Figma "title" (Display/Panel Small). |
| headingLevel? | 2 | 3 | 2 | Outline level of the title. |
| body? | string | — | Figma "body". |
| status? | string | — | Figma "status" (`showStatus`): what is still running, "Pronto por volta das 19:00". Announced politely when it changes. |
| art? | ReactNode | — | Figma "art" (`showArt`): a Tile. Leave it out for the lighthouse; pass `null` for no art. |
| className? | string | — |