diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-05-03 10:38:52 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-05-03 10:38:52 +0700 |
| commit | b4abdb00ef83aa824e8a05d5b75df48adb7b9629 (patch) | |
| tree | 86ce2454793fe31b54a87f151433cbf86dbed134 /src/core/components/elements/CountDown | |
| parent | 31816dc3a6cb62e1480524c8f0065a7835fefdcd (diff) | |
semi dynamic page
Diffstat (limited to 'src/core/components/elements/CountDown')
| -rw-r--r-- | src/core/components/elements/CountDown/CountDown.jsx | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/core/components/elements/CountDown/CountDown.jsx b/src/core/components/elements/CountDown/CountDown.jsx index 877f7998..91a1f68e 100644 --- a/src/core/components/elements/CountDown/CountDown.jsx +++ b/src/core/components/elements/CountDown/CountDown.jsx @@ -15,7 +15,8 @@ const CountDown = ({ initialTime }) => { useEffect(() => { const timer = setInterval(() => { - const totalSeconds = timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second + const totalSeconds = + timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second const secondsLeft = totalSeconds - 1 if (secondsLeft < 0) { clearInterval(timer) @@ -33,19 +34,27 @@ const CountDown = ({ initialTime }) => { return ( <div className='flex gap-x-2.5 w-fit'> <div className='flex flex-col items-center'> - <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.day.toString().padStart(2, '0')}</span> + <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'> + {timeLeft.day.toString().padStart(2, '0')} + </span> <span className='text-caption-1 text-gray-700 mt-1'>Hari</span> </div> <div className='flex flex-col items-center'> - <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.hour.toString().padStart(2, '0')}</span> + <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'> + {timeLeft.hour.toString().padStart(2, '0')} + </span> <span className='text-caption-1 text-gray-700 mt-1'>Jam</span> </div> <div className='flex flex-col items-center'> - <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.minute.toString().padStart(2, '0')}</span> + <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'> + {timeLeft.minute.toString().padStart(2, '0')} + </span> <span className='text-caption-1 text-gray-700 mt-1'>Menit</span> </div> <div className='flex flex-col items-center'> - <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.second.toString().padStart(2, '0')}</span> + <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'> + {timeLeft.second.toString().padStart(2, '0')} + </span> <span className='text-caption-1 text-gray-700 mt-1'>Detik</span> </div> </div> |