1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import { useEffect, useState } from 'react'
const CountDown2 = ({ initialTime }) => {
/*const hours = Math.floor(initialTime / 3600)
const minutes = Math.floor((initialTime % 3600) / 60)
const seconds = initialTime % 60
const [timeLeft, setTimeLeft] = useState({
hour: hours,
minute: minutes,
second: seconds
})
useEffect(() => {
const timer = setInterval(() => {
const totalSeconds = timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
const secondsLeft = totalSeconds - 1
if (secondsLeft < 0) {
clearInterval(timer)
} else {
const hours = Math.floor(secondsLeft / 3600)
const minutes = Math.floor((secondsLeft % 3600) / 60)
const seconds = secondsLeft % 60
setTimeLeft({ hour: hours, minute: minutes, second: seconds })
}
}, 1000)
return () => clearInterval(timer)
}, [timeLeft])*/
const days = Math.floor(initialTime / 86400)
const hours = Math.floor((initialTime % 86400) / 3600)
const minutes = Math.floor((initialTime % 3600) / 60)
const seconds = initialTime % 60
const [timeLeft, setTimeLeft] = useState({
day: days,
hour: hours,
minute: minutes,
second: seconds
})
useEffect(() => {
const timer = setInterval(() => {
const totalSeconds =
timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
const secondsLeft = totalSeconds - 1
if (secondsLeft < 0) {
clearInterval(timer)
} else {
const days = Math.floor(secondsLeft / 86400)
const hours = Math.floor((secondsLeft % 86400) / 3600)
const minutes = Math.floor((secondsLeft % 3600) / 60)
const seconds = secondsLeft % 60
setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds })
}
}, 1000)
return () => clearInterval(timer)
}, [timeLeft])
return (
<div className='flex justify-between gap-x-2'>
<div className='flex flex-col items-center'>
<span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
{timeLeft.day.toString().padStart(2, '0')}
</span>
<span className='text-xs text-white'>Hari</span>
</div>
<div className='flex flex-col items-center'>
<span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
{timeLeft.hour.toString().padStart(2, '0')}
</span>
<span className='text-xs text-white'>Jam</span>
</div>
<div className='flex flex-col items-center'>
<span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
{timeLeft.minute.toString().padStart(2, '0')}
</span>
<span className='text-xs text-white'>Menit</span>
</div>
</div>
)
}
export default CountDown2
|
