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 ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.