Sliding Number Counter
Sliding Number Counter é um componente para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.
Motion Primitives
MIT
other
O que é
Sliding Number Counter é um componente para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Não precisa de pacotes além do que o projeto já tem
Licença
Este componente vem de Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Sliding Number Counter
'use client';
import { SlidingNumber } from '@/components/core/sliding-number';
import { useEffect, useState } from 'react';
export function Clock() {
const [time, setTime] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => {
setTime(new Date());
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div className='flex items-center gap-0.5 font-mono'>
<SlidingNumber value={time.getHours()} padStart={true} />
<span className='text-zinc-500'>:</span>
<SlidingNumber value={time.getMinutes()} padStart={true} />
<span className='text-zinc-500'>:</span>
<SlidingNumber value={time.getSeconds()} padStart={true} />
</div>
);
}