1 files changed, 42 insertions, 0 deletions
diff --git a/src-migrate/modules/product/PromoSection.tsx b/src-migrate/modules/product/PromoSection.tsx
new file mode 100644
index 00000000..299cbb78
--- /dev/null
+++ b/src-migrate/modules/product/PromoSection.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import style from "./PromoSection.module.css"
+import PromoCard from './PromoCard'
+import { useQuery } from 'react-query'
+import { Skeleton } from '@chakra-ui/react'
+import { IPromotion } from '~/common/types/promotion'
+
+type Props = {
+  productId: number
+}
+
+const PromoSection = ({ productId }: Props) => {
+  const promotionsQuery = useQuery(
+    `promotions-highlight:${productId}`,
+    async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] },
+  )
+
+  const promotions = promotionsQuery.data
+
+  const handleSeeMore = () => { }
+
+  return (
+    <div className='w-full'>
+      {promotions?.data && promotions?.data.length > 0 && (
+        <div className={style.titleWrapper}>
+          <span className={style.title}>Promo Tersedia</span>
+          <button type='button' onClick={handleSeeMore} className={style.seeMore}>
+            Lihat Semua
+          </button>
+        </div>
+      )}
+
+      <Skeleton isLoaded={promotionsQuery.isSuccess} className="flex gap-x-4 overflow-x-auto min-h-[340px]">
+        {promotions?.data.map((promotion) => (
+          <PromoCard key={promotion.id} promotion={promotion} />
+        ))}
+      </Skeleton>
+    </div>
+  )
+}
+
+export default PromoSection
+\ No newline at end of file