src-migrate/modules/product-promo/components/Item.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/item.module.css'

import { Tooltip } from '@chakra-ui/react'

import Image from '~/components/ui/image'
import { IProductVariantPromo } from '~/types/promotion'

type Props = {
  variant: IProductVariantPromo,
  isFree?: boolean
}

const ProductPromoItem = ({
  variant,
  isFree = false
}: Props) => {
  return (
    <div className={style.item}>
      <div className={style.image}>
        <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} />
        <div className={style.quantity}>
          {variant.qty} pcs {isFree ? '(free)' : ''}
        </div>
      </div>
      <Tooltip label={variant.display_name} placement='top' fontSize='sm'>
        <div className={style.name}>
          {variant.name}
        </div>
      </Tooltip>
    </div>
  )
}

export default ProductPromoItem