flash sale and countdown

1 files changed, 37 insertions, 0 deletions

diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
new file mode 100644
index 00000000..0167dc57
--- /dev/null
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import flashSaleApi from '../api/flashSaleApi'
+import Image from '@/core/components/elements/Image/Image'
+import CountDown from '@/core/components/elements/CountDown/CountDown'
+
+const FlashSale = () => {
+  const [flashSales, setFlashSales] = useState(null)
+
+  useEffect(() => {
+    const loadFlashSales = async () => {
+      const dataFlashSales = await flashSaleApi()
+      setFlashSales(dataFlashSales)
+    }
+    loadFlashSales()
+  }, [])
+
+  return flashSales?.length > 0 && (
+    <div className='px-4 sm:px-0'>
+      
+      {flashSales.map((flashSale, index) => (
+        <div key={index}>
+          <div className='font-medium sm:text-h-lg mb-4'>{flashSale.name}</div>
+
+          <div className='relative'>
+            <div className='absolute top-0 left-0 p-4'>
+              <CountDown initialTime={flashSale.duration} />
+            </div>
+            <Image src={flashSale.banner} alt={flashSale.name} className='w-full rounded' />
+          </div>
+
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default FlashSale