2021-08-24 16:25:08 +07:00

60 lines
1.6 KiB
TypeScript

import React from 'react'
import ButtonCommon from '../ButtonCommon/ButtonCommon'
import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
import ItemWishList from '../ItemWishList/ItemWishList'
import LabelCommon from '../LabelCommon/LabelCommon'
import s from './ProductCard.module.scss'
interface ProductCardProps {
category: string
name: string
weight: string
price: string
buttonText?: string
imageSrc: string
}
const ProductCard = ({
category,
name,
weight,
price,
buttonText = 'Buy Now',
imageSrc,
}: ProductCardProps) => {
return (
<section className={s.productCardWarpper}>
<section className={s.cardTop}>
<div className={s.productImage}>
<img src={imageSrc} alt="image" />
<div className={s.productLabel}>
<LabelCommon shape="half">{category}</LabelCommon>
</div>
</div>
</section>
<section className={s.cardMid}>
<div className={s.cardMidTop}>
<div className={s.productname}>{name} </div>
<div className={s.productWeight}>{weight}</div>
</div>
<div className={s.cardMidBot}>
<div className={s.productPrice}>{price}</div>
<div className={s.wishList}>
<ItemWishList />
</div>
</div>
</section>
<section className={s.cardBot}>
<div className={s.cardIcon}>
<ButtonIconBuy/>
</div>
<div className={s.cardButton}>
<ButtonCommon type="ghost">{buttonText}</ButtonCommon>
</div>
</section>
</section>
)
}
export default ProductCard