1 files changed, 126 insertions, 0 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
new file mode 100644
index 00000000..b752a138
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -0,0 +1,126 @@
+import style from '../styles/product-detail.module.css'
+
+import React from 'react'
+import Link from 'next/link'
+import { MessageCircleIcon } from 'lucide-react'
+import { Button } from '@chakra-ui/react'
+
+import { IProductDetail } from '~/types/product'
+
+import ProductImage from './Image'
+import Information from './Information'
+import AddToWishlist from './AddToWishlist'
+import VariantList from './VariantList'
+import SimilarSide from './SimilarSide'
+import SimilarBottom from './SimilarBottom'
+import useDevice from '@/core/hooks/useDevice'
+import PriceAction from './PriceAction'
+
+type Props = {
+  product: IProductDetail
+}
+
+const ProductDetail = ({ product }: Props) => {
+  const { isDesktop, isMobile } = useDevice()
+
+  return (
+    <>
+      <div className='md:flex md:flex-wrap'>
+        <div className='md:w-9/12 md:flex md:flex-col md:pr-4'>
+          <div className='md:flex md:flex-wrap'>
+            <div className="md:w-4/12">
+              <ProductImage product={product} />
+            </div>
+
+            <div className='md:w-8/12 px-4 md:pl-6'>
+              <div className='h-6 md:h-0' />
+
+              <h1 className={style['title']}>
+                {product.name}
+              </h1>
+
+              <div className='h-6 md:h-8' />
+
+              <Information product={product} />
+
+              <div className='h-4' />
+
+              <Button
+                as={Link}
+                href=''
+                variant='link'
+                colorScheme='red'
+                leftIcon={<MessageCircleIcon size={18} />}
+              >
+                Ask Admin
+              </Button>
+            </div>
+          </div>
+
+          <div className='h-full'>
+            {isMobile && (
+              <div className='px-4 pt-6'>
+                <PriceAction product={product} />
+              </div>
+            )}
+
+            <div className='h-4 md:h-10'></div>
+
+            <div className={style['section-card']}>
+              <h2 className={style['heading']}>
+                Variant ({product.variant_total})
+              </h2>
+              <div className='h-4' />
+              <VariantList variants={product.variants} />
+            </div>
+
+            <div className='h-0 md:h-6'></div>
+
+            <div className={style['section-card']}>
+              <h2 className={style['heading']}>
+                Informasi Produk
+              </h2>
+              <div className='h-4' />
+              <div
+                className={style['description']}
+                dangerouslySetInnerHTML={{ __html: !product.description || product.description == '<p><br></p>' ? 'Belum ada deskripsi' : product.description }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {isDesktop && (
+          <div className="md:w-3/12">
+            <PriceAction product={product} />
+
+            <AddToWishlist />
+
+            <div className='h-8' />
+
+            <div className={style['heading']}>
+              Produk Serupa
+            </div>
+
+            <div className='h-4' />
+
+            <SimilarSide product={product} />
+          </div>
+        )}
+
+        <div className='md:w-full py-0 md:py-10 px-4 md:px-0'>
+          <div className={style['heading']}>
+            Kamu Mungkin Juga Suka
+          </div>
+
+          <div className='h-6' />
+
+          <SimilarBottom product={product} />
+        </div>
+
+        <div className='h-6 md:h-0' />
+      </div>
+    </>
+  )
+}
+
+export default ProductDetail
+\ No newline at end of file