Countdown

Apresentação

O componente Countdown é responsável por exibir uma contagem regressiva, permitindo a visualização do tempo restante em diferentes unidades (segundos, minutos, horas ou dias). O componente oferece recursos como callback ao finalizar e suporte a diferentes unidades de tempo.

Quando usar

• Para exibir tempo restante em promoções
• Para mostrar contagem regressiva em eventos
• Para criar timers em jogos ou aplicações
• Para exibir tempo de sessão
• Para criar contadores de tempo
• Para implementar funcionalidades de timeout

Forma básica de uso

import { Countdown } from 'eitri-luminus';

// Contagem regressiva básica em segundos
<Countdown value={60} />

// Contagem regressiva em minutos
<Countdown 
  value={5} 
  unit="minutes" 
/>

// Contagem regressiva com callback
<Countdown 
  value={3600} 
  unit="hours"
  onEnd={() => console.log('Tempo finalizado!')}
/>

// Contagem regressiva com classes personalizadas
<Countdown 
  value={86400} 
  unit="days"
  className="text-primary text-2xl"
/>

Propriedades

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
value	number	Valor inicial da contagem regressiva
unit	'seconds' | 'minutes' | 'hours' | 'days'	Unidade de tempo
onEnd	() => void	Callback executado ao finalizar a contagem

Heranças

O componente Countdown herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente Countdown expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Countdown } from 'eitri-luminus';

function MyComponent() {
  const countdownRef = useRef<Countdown>(null);

  const handlePause = () => {
    countdownRef.current?.pause();
  };

  const handleResume = () => {
    countdownRef.current?.resume();
  };

  const handleReset = () => {
    countdownRef.current?.reset();
  };

  return (
    <>
      <Countdown
        ref={countdownRef}
        value={60}
        unit="seconds"
        onEnd={() => console.log('Tempo finalizado!')}
      />
      <button onClick={handlePause}>Pausar</button>
      <button onClick={handleResume}>Retomar</button>
      <button onClick={handleReset}>Resetar</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
start()	void	Inicia a contagem regressiva
pause()	void	Pausa a contagem regressiva
resume()	void	Retoma a contagem regressiva
reset()	void	Reseta a contagem para o valor inicial
getRemainingTime()	number	Retorna o tempo restante em segundos
isRunning()	boolean	Retorna se a contagem está em execução
getFormattedTime()	string	Retorna o tempo formatado de acordo com a unidade

Observações

• O componente usa a classe 'countdown' para estilização base
• A contagem é atualizada a cada segundo
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• O valor é sempre arredondado para cima na unidade especificada
• O componente suporta diferentes unidades de tempo
• A contagem é interrompida automaticamente ao chegar em zero
• O callback onEnd é chamado quando a contagem chega a zero
• Métodos via ref disponíveis para controle programático da contagem
• O componente agora estende BaseComponent e suporta todas as propriedades comuns