CountdownTimer

countdowntimer-1779393693260.tsx

'use client'
import { useState, useEffect, useRef } from 'react'

function Digit({ value, label }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{
        background: '#1e1e2e', color: '#a78bfa', borderRadius: '12px',
        padding: '16px 20px', fontSize: '36px', fontWeight: 900, fontFamily: 'monospace',
        minWidth: '72px', boxShadow: '0 4px 16px rgba(0,0,0,0.2)',
      }}>{String(value).padStart(2, '0')}</div>
      <div style={{ fontSize: '11px', color: '#64748b', marginTop: '6px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{label}</div>
    </div>
  )
}

export default function CountdownTimer({ initial = 300 }) {
  const [seconds, setSeconds] = useState(initial)
  const [running, setRunning] = useState(false)
  const ref = useRef(null)
  useEffect(() => {
    if (running && seconds > 0) {
      ref.current = setInterval(() => setSeconds(s => s - 1), 1000)
    } else {
      clearInterval(ref.current)
      if (seconds === 0) setRunning(false)
    }
    return () => clearInterval(ref.current)
  }, [running, seconds])
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = seconds % 60
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
      <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
        {h > 0 && <><Digit value={h} label="hours" /><span style={{ fontSize: '36px', color: '#6d28d9', alignSelf: 'center', marginBottom: '20px' }}>:</span></>}
        <Digit value={m} label="min" />
        <span style={{ fontSize: '36px', color: '#6d28d9', alignSelf: 'center', marginBottom: '20px' }}>:</span>
        <Digit value={s} label="sec" />
      </div>
      <div style={{ display: 'flex', gap: '10px' }}>
        <button onClick={() => setRunning(!running)} style={{
          padding: '8px 20px', borderRadius: '8px', border: 'none', fontWeight: 600, cursor: 'pointer',
          background: running ? '#ef4444' : '#6d28d9', color: '#fff', fontSize: '14px',
        }}>{running ? '⏸ Pause' : '▶ Start'}</button>
        <button onClick={() => { setSeconds(initial); setRunning(false) }} style={{
          padding: '8px 16px', borderRadius: '8px', border: '1px solid #e2e8f0', background: '#fff', cursor: 'pointer', fontSize: '14px',
        }}>↺ Reset</button>
      </div>
    </div>
  )
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Countdown timer with digit flip animation and controls

More from Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility