|
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ProductDesign = ({
|
|
|
|
|
colors,
|
|
|
|
|
likeBtn,
|
|
|
|
|
discount,
|
|
|
|
|
discountPricePercent,
|
|
|
|
|
discountPrice,
|
|
|
|
|
productContent,
|
|
|
|
|
star,
|
|
|
|
|
productTags,
|
|
|
|
|
priceDirection,
|
|
|
|
|
productTitleAlignment,
|
|
|
|
|
priceHolder,
|
|
|
|
|
productHolderBorder,
|
|
|
|
|
productHolderBorderColor,
|
|
|
|
|
productTitleColor,
|
|
|
|
|
productExcerptTextColor,
|
|
|
|
|
productCat,
|
|
|
|
|
productCatTextColor,
|
|
|
|
|
rangeHolder,
|
|
|
|
|
verticalImg,
|
|
|
|
|
horizontalImg,
|
|
|
|
|
rangeWidth,
|
|
|
|
|
addToCartHolder,
|
|
|
|
|
productName,
|
|
|
|
|
productPrice,
|
|
|
|
|
productImg,
|
|
|
|
|
writeGHEIMAT,
|
|
|
|
|
numberOfRegards,
|
|
|
|
|
productHolderHoverBorder,
|
|
|
|
|
hoverMode,
|
|
|
|
|
teacher
|
|
|
|
|
}) => {
|
|
|
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
|
|
|
return (
|
|
|
|
|
<div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
|
|
|
|
|
style={ {width: '400px', direction:'rtl'}}
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<div className="border-b border-red82OP pb-2 px-4">
|
|
|
|
|
<h1 className="text-red52 text-lg font-bold">{productName}</h1>
|
|
|
|
|
<p className="text-red26 text-sm my-2">
|
|
|
|
|
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex border-b border-red82OP px-4 py-2">
|
|
|
|
|
<div>
|
|
|
|
|
<h1 className="font-bold text-red26">
|
|
|
|
|
استاد : {teacher}
|
|
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex border-b border-red82OP px-4 py-2 text-red26">
|
|
|
|
|
<h1>نوع گروه : A</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex p-4 justify-between items-center">
|
|
|
|
|
<h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
|
|
|
|
|
<div
|
|
|
|
|
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center
|
|
|
|
|
`}
|
|
|
|
|
>
|
|
|
|
|
<button>افزودن به سبد خرید</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ProductDesign;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ProductDesign.defaultProps = {
|
|
|
|
|
// icons on product image
|
|
|
|
|
colors: false,
|
|
|
|
|
likeBtn: false,
|
|
|
|
|
discount: false,
|
|
|
|
|
discountPricePercent: false,
|
|
|
|
|
// product price
|
|
|
|
|
discountPrice: false,
|
|
|
|
|
priceHolder: true,
|
|
|
|
|
|
|
|
|
|
productContent: false,
|
|
|
|
|
star: true,
|
|
|
|
|
productTags: [],
|
|
|
|
|
productCat: true,
|
|
|
|
|
rangeHolder: true,
|
|
|
|
|
|
|
|
|
|
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
|
|
|
|
|
verticalImg: true,
|
|
|
|
|
horizontalImg: false,
|
|
|
|
|
|
|
|
|
|
addToCartHolder: false,
|
|
|
|
|
|
|
|
|
|
productTitleColor: "text-productTitle",
|
|
|
|
|
|
|
|
|
|
productExcerptTextColor: "text-productContent",
|
|
|
|
|
|
|
|
|
|
productCatTextColor: "text-darkCrimsonTextColor",
|
|
|
|
|
// برای درصد دادن به عرض رنج
|
|
|
|
|
rangeWidth: "w-44",
|
|
|
|
|
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
|
|
|
|
|
productHolderBorder: "border",
|
|
|
|
|
productHolderBorderColor: "border-grayBorderColor",
|
|
|
|
|
|
|
|
|
|
productTitleAlignment: "text-justify",
|
|
|
|
|
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
|
|
|
|
|
priceDirection: "flex-row",
|
|
|
|
|
// productImg: book,
|
|
|
|
|
writeGHEIMAT: false
|
|
|
|
|
};
|