You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

68 lines
2.1 KiB

import React from "react";
const AddToCartCard = ({
numberOfSuggest,
sendingTime,
button,
price,
profit,
showProduct,
productName,
productImg,
productCat,
}) => {
const specialities = [
{
icon: "images/tick-circle.svg",
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
},
{
icon: "images/shield-tick.svg",
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
},
{
icon: "images/delivery-icon.svg",
description: `گارانتی اصالت و سلامت فیزیکی`,
},
];
return (
<div className="w-full felx flex-col items-center justify-center mx-4 p-4 pt-0 bg-gray-100">
{showProduct && (
<div className="w-full max-w-8 flex justify-center items-center m-0 py-4 overflow-hidden">
<img
src={productImg}
alt="productImage"
className="max-w-[100px] ml-4 py-2 px-4 bg-gray-200 rounded"
/>
<div className="text-sm">
<h1 className="text-sm">{productName}</h1>
<p className="pt-2 text-xs text-blue-400">{productCat}</p>
</div>
</div>
)}
{specialities.map((item, index) => (
<div
key={index}
className="w-full flex items-center p-2 border-b border-solid border-gray-300"
>
{item.icon && <img src={item.icon} alt="" className="pl-3" />}
<p className="text-sm text-blue-400 text-right">{item.description}</p>
</div>
))}
<div className="w-full flex flex-col items-center justify-center p-4">
<h1 className="text-xl text-gray-500">
<span className="text-blue-400"> {price} </span>
تومان
</h1>
{profit && (
<h5 className="p-2 pb-0 text-xs text-blue-400">
با خرید این کالا {profit} تومان سود کنید
</h5>
)}
</div>
<div className="w-full flex justify-center">{button}</div>
</div>
);
};
export default AddToCartCard;