src-migrate/modules/product-detail/components/SimilarSide.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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