1 files changed, 99 insertions, 0 deletions
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
new file mode 100644
index 00000000..2ab3ff59
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -0,0 +1,99 @@
+import style from '../styles/image.module.css';
+
+import React, { useEffect, useState } from 'react'
+import { InfoIcon } from 'lucide-react'
+import { Tooltip } from '@chakra-ui/react'
+
+import { IProductDetail } from '~/types/product'
+import ImageUI from '~/components/ui/image'
+import moment from 'moment';
+
+type Props = {
+  product: IProductDetail
+}
+
+const Image = ({ product }: Props) => {
+  const flashSale = product.flash_sale
+
+  const [count, setCount] = useState(flashSale?.remaining_time || 0);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (flashSale?.remaining_time && flashSale.remaining_time > 0) {
+      setCount(flashSale.remaining_time);
+
+      interval = setInterval(() => {
+        setCount((prevCount) => prevCount - 1);
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [flashSale?.remaining_time]);
+
+  const duration = moment.duration(count, 'seconds')
+
+  return (
+    <div className={style['wrapper']}>
+      <ImageUI
+        src={product.image || '/images/noimage.jpeg'}
+        alt={product.name}
+        width={256}
+        height={256}
+        className={style['image']}
+        loading='eager'
+        priority
+      />
+
+      <div className={style['absolute-info']}>
+        <Tooltip
+          placement='bottom-end'
+          label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.'
+        >
+          <div className="text-gray-600">
+            <InfoIcon size={20} />
+          </div>
+        </Tooltip>
+      </div>
+
+      {flashSale.remaining_time > 0 && (
+        <div className='absolute bottom-0 w-full h-14'>
+          <div className="relative w-full h-full">
+            <ImageUI
+              src='/images/GAMBAR-BG-FLASH-SALE.jpg'
+              alt='Flash Sale Indoteknik'
+              width={200}
+              height={100}
+              className={style['flashsale-bg']}
+            />
+
+            <div className={style['flashsale']}>
+              <div className='flex items-center gap-x-3'>
+                <div className={style['disc-badge']}>{Math.floor(product.lowest_price.discount_percentage)}%</div>
+                <div className={style['flashsale-text']}>
+                  <ImageUI
+                    src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                    alt='Icon Flash Sale'
+                    width={20}
+                    height={20}
+                  />
+                  {product.flash_sale.tag}
+                </div>
+              </div>
+              <div className={style['countdown']}>
+                <span>{duration.hours().toString().padStart(2, '0')}</span>
+                <span>{duration.minutes().toString().padStart(2, '0')}</span>
+                <span>{duration.seconds().toString().padStart(2, '0')}</span>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Image
+\ No newline at end of file