layout promotion program di detail product dan layout modal popup

1 files changed, 51 insertions, 0 deletions

diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx
new file mode 100644
index 00000000..61503d17
--- /dev/null
+++ b/src/core/components/elements/CountDown/CountDown2.jsx
@@ -0,0 +1,51 @@
+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])
+
+  return (
+    <div className='flex justify-between gap-x-2'>
+      <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>
+      </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>
+      </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>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown2