diff options
Diffstat (limited to 'src/core/components')
| -rw-r--r-- | src/core/components/elements/CountDown/CountDown2.jsx | 50 | ||||
| -rw-r--r-- | src/core/components/layouts/BasicLayout.jsx | 1 |
2 files changed, 42 insertions, 9 deletions
diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx index 61503d17..e85a22cb 100644 --- a/src/core/components/elements/CountDown/CountDown2.jsx +++ b/src/core/components/elements/CountDown/CountDown2.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' const CountDown2 = ({ initialTime }) => { - const hours = Math.floor(initialTime / 3600) + /*const hours = Math.floor(initialTime / 3600) const minutes = Math.floor((initialTime % 3600) / 60) const seconds = initialTime % 60 @@ -25,24 +25,58 @@ const CountDown2 = ({ initialTime }) => { } }, 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 justify-between gap-x-2 mt-18'> <div className='flex flex-col items-center'> - <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.hour.toString().padStart(2, '0')} + <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-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.minute.toString().padStart(2, '0')} + <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-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.second.toString().padStart(2, '0')} + <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> ) diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 554f587d..2e98eb61 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -37,7 +37,6 @@ const BasicLayout = ({ children }) => { const { slug } = router.query const getProduct = async () => { let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) - console.log('ini product', product) setPayloadWa({ name: product[0]?.name, manufacture: product[0]?.manufacture.name, |