PairingCodeDisplay
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Pairing Code Display
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).
| Default | Copied | Refreshing | Start |
|---|---|---|---|
K7QM-4XPA Atualiza sozinho. Este vale até 14:35. | K7QM-4XPA Atualiza sozinho. Este vale até 14:35. Código copiado | Gerando um novo código… | Conectar o WhatsApp deste celular A gente mostra um código. Você digita no WhatsApp deste celular, em Dispositivos conectados. Não precisa de outro aparelho. |
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 |
|---|---|---|---|
| code | string | — | Figma `code`: the 8-character WhatsApp code ("K7QM-4XPA"). |
| state? | "copied" | "default" | "refreshing" | "start" | "default" | Figma State. Copied is also reached by pressing Copy; Refreshing disables the actions while a new code is made; Start is before any code. |
| className? | string | — |
VoiceRecorder
The voice step of consent, visual part only (Figma "Voice Recorder" 191:1857, v2): the phrase first, then Ready (record on tap, listen, an accommodation path), Countdown 3-2-1, Reading (live prompter, "Gravando" with the time, "Terminei de ler") and Recorded (Audio Player, "Continuar", "Gravar de novo").
PairingSteps