From b02510e26e7e9bc292a1779bd23801014b94aad4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 26 Apr 2023 17:23:52 +0700
Subject: flash sale and countdown

---
 .../components/elements/CountDown/CountDown.jsx    | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/core/components/elements/CountDown/CountDown.jsx

(limited to 'src/core/components/elements/CountDown/CountDown.jsx')

diff --git a/src/core/components/elements/CountDown/CountDown.jsx b/src/core/components/elements/CountDown/CountDown.jsx
new file mode 100644
index 00000000..49a33d77
--- /dev/null
+++ b/src/core/components/elements/CountDown/CountDown.jsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+
+const CountDown = ({ initialTime }) => {
+  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 gap-x-3 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}</span>
+        <span className='text-caption-1 text-gray-807'>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}</span>
+        <span className='text-caption-1 text-gray-807'>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}</span>
+        <span className='text-caption-1 text-gray-700'>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}</span>
+        <span className='text-caption-1 text-gray-700'>Detik</span>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown
-- 
cgit v1.2.3


From 5d8ad078bdc735e708654e278b226868dc3bc403 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 27 Apr 2023 16:45:05 +0700
Subject: flash sale mapping, mobile flash sale

---
 src/core/components/elements/CountDown/CountDown.jsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'src/core/components/elements/CountDown/CountDown.jsx')

diff --git a/src/core/components/elements/CountDown/CountDown.jsx b/src/core/components/elements/CountDown/CountDown.jsx
index 49a33d77..877f7998 100644
--- a/src/core/components/elements/CountDown/CountDown.jsx
+++ b/src/core/components/elements/CountDown/CountDown.jsx
@@ -31,22 +31,22 @@ const CountDown = ({ initialTime }) => {
   }, [timeLeft])
 
   return (
-    <div className='flex gap-x-3 w-fit'>
+    <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}</span>
-        <span className='text-caption-1 text-gray-807'>Hari</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}</span>
-        <span className='text-caption-1 text-gray-807'>Jam</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}</span>
-        <span className='text-caption-1 text-gray-700'>Menit</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}</span>
-        <span className='text-caption-1 text-gray-700'>Detik</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>
   )
-- 
cgit v1.2.3


From b4abdb00ef83aa824e8a05d5b75df48adb7b9629 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 3 May 2023 10:38:52 +0700
Subject: semi dynamic page

---
 src/core/components/elements/CountDown/CountDown.jsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

(limited to 'src/core/components/elements/CountDown/CountDown.jsx')

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>
-- 
cgit v1.2.3