69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
'use client'
|
|
import { useEffect, useState } from "react"
|
|
|
|
const msInSecond = 1000
|
|
const msInMinute = 60 * msInSecond
|
|
const msInHour = 60 * msInMinute
|
|
const msInDay = 24 * msInHour
|
|
|
|
const getPartsOfTimeDuration = (duration: number) => {
|
|
const days = Math.floor(duration / msInDay)
|
|
const hours = Math.floor((duration % msInDay) / msInHour)
|
|
const minutes = Math.floor((duration % msInHour) / msInMinute)
|
|
const seconds = Math.floor((duration % msInMinute) / msInSecond)
|
|
|
|
return { days, hours, minutes, seconds }
|
|
}
|
|
|
|
export default function Countdown2() {
|
|
const [timeDif, setTimeDif] = useState(() => {
|
|
const now = Date.now()
|
|
const endDateTime = new Date()
|
|
endDateTime.setDate(endDateTime.getDate() + 2) // Set end date 2 days from now
|
|
return endDateTime.getTime() - now
|
|
})
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTimeDif((prev) => {
|
|
const updatedTime = prev - 1000
|
|
if (updatedTime <= 0) {
|
|
clearInterval(interval)
|
|
return 0
|
|
}
|
|
return updatedTime
|
|
})
|
|
}, 1000)
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
const timeParts = getPartsOfTimeDuration(timeDif)
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-duration={900}>
|
|
<div className="time-box">
|
|
<span id="days1" className="time-value">{timeParts.days}<span>Days</span></span>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
|
|
<div className="time-box">
|
|
<span id="hours1" className="time-value">{timeParts.hours}<span>Hours</span></span>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-duration={1100}>
|
|
<div className="time-box">
|
|
<span id="minutes1" className="time-value">{timeParts.minutes}<span>Minutes</span></span>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-duration={1200}>
|
|
<div className="time-box">
|
|
<span id="seconds1" className="time-value">{timeParts.seconds}<span>Seconds</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
}
|