Explore

Documentação do Componente Timer

Visão Geral

⁠

O componente Timer é um contador regressivo (countdown) que exibe o tempo restante até uma data específica. Ele é usado para criar urgência em campanhas, promoções ou eventos com prazo determinado.

Funcionalidade Principal

Countdown em tempo real: atualiza automaticamente a cada segundo

Formatação visual customizável: permite personalizar cores e estilos

Responsivo: adapta-se a diferentes tamanhos de tela

Auto-ocultação: esconde automaticamente quando o prazo expira

⁠

Props do Componente

text (string, opcional) Título: Texto Descrição: Texto descritivo que aparece ao lado do timer Formato: Rich text (HTML) Valor padrão: "Time left for a campaign to end with a link" Uso: Para explicar o contexto do countdown (ex: "Promoção termina em:") Obs: Desenvolvido conforme Figma para textos pequenos

expiresAt (string, obrigatório) Título: Data de expiração Descrição: Data e hora quando o timer deve zerar Formato: datetime (ISO 8601) Exemplo: "2024-12-31T23:59:59.000Z" Uso: Define quando o countdown chegará ao fim

backgroundColor (string, opcional) Título: Cor de fundo Descrição: Cor de fundo da seção inteira do timer Formato: Cor CSS (hex, rgb, nome) Exemplo: "#ff0000", "red", "rgb(255,0,0)" Uso: Personalizar o visual geral do componente

spanBackgroundColor (string, opcional) Título: Cor de fundo dos números Descrição: Cor de fundo específica dos dígitos do timer Formato: Cor CSS Uso: Destacar os números do countdown

spanTextColor (string, opcional) Título: Cor do texto dos números Descrição: Cor dos dígitos numéricos do timer Formato: Cor CSS Uso: Contraste e legibilidade dos números

textColor (string, opcional) Título: Cor do texto Descrição: Cor dos textos descritivos (labels e texto principal) Formato: Cor CSS Uso: Harmonizar com o design geral

labels (objeto, opcional) Título: Rótulos das unidades de tempo Descrição: Personaliza os textos que aparecem abaixo de cada unidade Estrutura:

days (padrão: "days")

hours (padrão: "hours")

minutes (padrão: "minutes")

seconds (padrão: "seconds") Uso: Traduzir ou personalizar os rótulos (ex: "dias", "horas", "min", "seg")

Como Funciona

Estrutura Visual

Seção principal: container com background personalizado

Texto descritivo: aparece à esquerda do timer

Contador: 4 grupos de dígitos (dias, horas, minutos, segundos)

Cada grupo: 2 dígitos + label abaixo

Lógica de Funcionamento

Cálculo: calcula a diferença entre data atual e expiresAt

Formatação: converte em dias, horas, minutos e segundos

Atualização: atualiza display a cada segundo via JavaScript

Expiração: quando chega a zero, esconde contador

Responsividade

Mobile: layout vertical, gaps menores

Desktop: layout horizontal, textos maiores

Breakpoints: usa classes Tailwind para diferentes tamanhos

Considerações Técnicas

Performance: usa setInterval otimizado para atualizações

SEO: suporta HTML no texto descritivo

Acessibilidade: IDs únicos para cada instância

Compatibilidade: funciona em todos os navegadores modernos

Estados do Componente

Ativo

Contador visível e atualizando

Texto descritivo exibido

Números mudando a cada segundo

Expirado

Contador oculto (hidden)

Mensagem "Expired!" exibida

Timer para de atualizar

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.