1 files changed, 50 insertions, 0 deletions
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
new file mode 100644
index 00000000..47e1de29
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -0,0 +1,50 @@
+import style from "../styles/section.module.css"
+
+import React from 'react'
+import { useQuery } from 'react-query'
+import { Button, Skeleton } from '@chakra-ui/react'
+
+import ProductPromoCard from './Card'
+import { IPromotion } from '~/common/types/promotion'
+import ProductPromoModal from "./Modal"
+import { useModalStore } from "../stores/useModalStore"
+
+type Props = {
+  productId: number
+}
+
+const ProductPromoSection = ({ 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 { openModal } = useModalStore()
+
+  return (
+    <div className='w-full'>
+      <ProductPromoModal />
+
+      {promotions?.data && promotions?.data.length > 0 && (
+        <div className={style.titleWrapper}>
+          <span className={style.title}>Promo Tersedia</span>
+          <Button colorScheme="yellow" type='button' onClick={() => openModal(productId)}>
+            Lihat Semua
+          </Button>
+        </div>
+      )}
+
+      <Skeleton isLoaded={promotionsQuery.isSuccess} className="flex gap-x-4 overflow-x-auto min-h-[340px] px-4 md:px-0">
+        {promotions?.data.map((promotion) => (
+          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
+            <ProductPromoCard promotion={promotion} />
+          </div>
+        ))}
+      </Skeleton>
+    </div>
+  )
+}
+
+export default ProductPromoSection
+\ No newline at end of file