1 files changed, 34 insertions, 0 deletions
diff --git a/src-migrate/modules/product-detail/components/SimilarSide.tsx b/src-migrate/modules/product-detail/components/SimilarSide.tsx
new file mode 100644
index 00000000..646a1c51
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/SimilarSide.tsx
@@ -0,0 +1,34 @@
+import style from '../styles/side-similar.module.css'
+
+import React from 'react'
+
+import ProductCard from '~/modules/product-card'
+import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
+import { IProductDetail } from '~/types/product'
+
+type Props = {
+  product: IProductDetail
+}
+
+const SimilarSide = ({ product }: Props) => {
+  const productSimilar = useProductSimilar({
+    name: product.name,
+    except: { productId: product.id, manufactureId: product.manufacture.id },
+  })
+
+  const products = productSimilar.data?.products || []
+
+  return (
+    <div className={style['wrapper']}>
+      {products.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          layout='horizontal'
+        />
+      ))}
+    </div>
+  )
+}
+
+export default SimilarSide
+\ No newline at end of file