KabundiNjuki
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
interface CountdownProps {
|
|
targetDate: Date
|
|
label?: string
|
|
}
|
|
|
|
export function Countdown({ targetDate, label = "EARLY BIRD CLOSES IN" }: CountdownProps) {
|
|
const [timeLeft, setTimeLeft] = useState({
|
|
days: 0,
|
|
hours: 0,
|
|
minutes: 0,
|
|
seconds: 0,
|
|
})
|
|
|
|
useEffect(() => {
|
|
const calculateTimeLeft = () => {
|
|
const difference = targetDate.getTime() - new Date().getTime()
|
|
|
|
if (difference > 0) {
|
|
setTimeLeft({
|
|
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
|
|
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
|
|
minutes: Math.floor((difference / 1000 / 60) % 60),
|
|
seconds: Math.floor((difference / 1000) % 60),
|
|
})
|
|
}
|
|
}
|
|
|
|
calculateTimeLeft()
|
|
const timer = setInterval(calculateTimeLeft, 1000)
|
|
|
|
return () => clearInterval(timer)
|
|
}, [targetDate])
|
|
|
|
const timeBlocks = [
|
|
{ value: timeLeft.days, label: 'DAYS' },
|
|
{ value: timeLeft.hours, label: 'HRS' },
|
|
{ value: timeLeft.minutes, label: 'MIN' },
|
|
{ value: timeLeft.seconds, label: 'SEC' },
|
|
]
|
|
|
|
return (
|
|
<div className="text-center">
|
|
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/55 uppercase tracking-[0.1em] mb-4">
|
|
{label}
|
|
</p>
|
|
<div className="flex justify-center gap-3">
|
|
{timeBlocks.map((block, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col items-center bg-white/10 rounded-lg px-4 py-3 md:px-5 md:py-4"
|
|
>
|
|
<span className="font-[family-name:var(--font-antonio)] font-bold text-[#FFF100] text-[40px] md:text-[52px] leading-none tabular-nums">
|
|
{String(block.value).padStart(2, '0')}
|
|
</span>
|
|
<span className="font-[family-name:var(--font-quicksand)] font-medium text-white/50 text-[10px] uppercase mt-1">
|
|
{block.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|