mirror of
https://github.com/vercel/commerce.git
synced 2025-07-12 07:21:21 +00:00
60 lines
1.6 KiB
TypeScript
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
|