|
|
|
|
@ -3,6 +3,8 @@ import React from "react"; |
|
|
|
|
import StarRating from "../starRating/StarRating"; |
|
|
|
|
import ReactTooltip from "react-tooltip"; |
|
|
|
|
|
|
|
|
|
import "./VodProductDesign.scss"; |
|
|
|
|
|
|
|
|
|
import book from "../../assets/images/goldon.png"; |
|
|
|
|
import watermelon from "../../assets/images/watermelon.png"; |
|
|
|
|
|
|
|
|
|
@ -31,11 +33,18 @@ const VodProductDesign = ({ |
|
|
|
|
productHolderBorder, |
|
|
|
|
productHolderBorderColor, |
|
|
|
|
productTitleColor, |
|
|
|
|
productExcerptTextColor, |
|
|
|
|
productCat, |
|
|
|
|
productCatTextColor, |
|
|
|
|
rangeHolder, |
|
|
|
|
priceTitle, |
|
|
|
|
productPriceAmountTitle, |
|
|
|
|
addToCartHolder, |
|
|
|
|
productTitleCategoryHolder, |
|
|
|
|
productTitleCategoryHolderAlignment, |
|
|
|
|
priceStarHolder, |
|
|
|
|
priceStarAlignment, |
|
|
|
|
rangeWidth, |
|
|
|
|
}) => { |
|
|
|
|
return ( |
|
|
|
|
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
|
|
|
|
@ -57,9 +66,9 @@ const VodProductDesign = ({ |
|
|
|
|
<div |
|
|
|
|
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} |
|
|
|
|
> |
|
|
|
|
{/* img */} |
|
|
|
|
{/* product image */} |
|
|
|
|
<div |
|
|
|
|
className="w-full relative flex items-center justify-center cursor-pointer" |
|
|
|
|
className="parent-img w-full relative flex items-center justify-center cursor-pointer" |
|
|
|
|
style={{ |
|
|
|
|
backgroundImage: `url(${watermelon})`, |
|
|
|
|
backgroundSize: "100% 100%", |
|
|
|
|
@ -67,6 +76,7 @@ const VodProductDesign = ({ |
|
|
|
|
minHeight: "180px", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{/* icons on image */} |
|
|
|
|
<div className="absolute left-2 top-2"> |
|
|
|
|
{discountPricePercent && ( |
|
|
|
|
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2"> |
|
|
|
|
@ -87,7 +97,7 @@ const VodProductDesign = ({ |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{/* play button */} |
|
|
|
|
<div className="bg-playButtonIcon rounded-full p-4"> |
|
|
|
|
<div className="playBtnImg bg-playButtonIcon rounded-full p-4"> |
|
|
|
|
<img src={whitePlayIcon} alt="" className="w-5 h-5" /> |
|
|
|
|
</div> |
|
|
|
|
{/* select Color */} |
|
|
|
|
@ -124,34 +134,45 @@ const VodProductDesign = ({ |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{/* product content */} |
|
|
|
|
<div className="px-2"> |
|
|
|
|
{/* content */} |
|
|
|
|
<div className="mt-4 flex justify-between items-center"> |
|
|
|
|
<h2 |
|
|
|
|
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} |
|
|
|
|
<div className="mt-4 flex flex-col"> |
|
|
|
|
<div |
|
|
|
|
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} |
|
|
|
|
> |
|
|
|
|
نسخه چاپی علموم تجربه هفتم |
|
|
|
|
</h2> |
|
|
|
|
<h2 |
|
|
|
|
className={`leading-4 text-sm mb-2 ${productTitleColor} ${productTitleAlignment}`} |
|
|
|
|
> |
|
|
|
|
نسخه چاپی علموم تجربه هفتم |
|
|
|
|
</h2> |
|
|
|
|
{productCat && ( |
|
|
|
|
<span |
|
|
|
|
className={`text-xs font-light ${productCatTextColor}`} |
|
|
|
|
> |
|
|
|
|
پایه سوم |
|
|
|
|
</span> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{productContent && ( |
|
|
|
|
<p className="text-justify text-productContent mt-2 text-xs leading-6"> |
|
|
|
|
<p |
|
|
|
|
className={`text-justify text-xs leading-6 ${productExcerptTextColor}`} |
|
|
|
|
> |
|
|
|
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های |
|
|
|
|
خوب دیگری نیز دارد. |
|
|
|
|
</p> |
|
|
|
|
)} |
|
|
|
|
{productCat && ( |
|
|
|
|
<span className="text-darkCrimsonTextColor text-xs font-light"> |
|
|
|
|
پایه سوم |
|
|
|
|
</span> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{/* price */} |
|
|
|
|
<div className="flex items-center justify-between mt-2"> |
|
|
|
|
<div |
|
|
|
|
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`} |
|
|
|
|
> |
|
|
|
|
{priceHolder && ( |
|
|
|
|
<div |
|
|
|
|
className={`flex items-center justify-between ${priceDirection}`} |
|
|
|
|
> |
|
|
|
|
{/* price */} |
|
|
|
|
<div className="mt-2"> |
|
|
|
|
<div className=""> |
|
|
|
|
<div |
|
|
|
|
className={`${ |
|
|
|
|
priceDirection.indexOf("col") !== -1 |
|
|
|
|
@ -179,7 +200,7 @@ const VodProductDesign = ({ |
|
|
|
|
{/* add to cart */} |
|
|
|
|
{addToCartHolder && ( |
|
|
|
|
<button |
|
|
|
|
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${ |
|
|
|
|
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${ |
|
|
|
|
priceDirection.indexOf("col") !== -1 ? "w-full" : "" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
@ -189,7 +210,7 @@ const VodProductDesign = ({ |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{star && ( |
|
|
|
|
<div className="flex items-center mt-2"> |
|
|
|
|
<div className="flex items-center"> |
|
|
|
|
<StarRating /> |
|
|
|
|
<span className="text-xs text-productContent font-bold mr-2"> |
|
|
|
|
39 |
|
|
|
|
@ -211,8 +232,10 @@ const VodProductDesign = ({ |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{rangeHolder && ( |
|
|
|
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-4"> |
|
|
|
|
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div> |
|
|
|
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
|
|
|
|
<div |
|
|
|
|
className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`} |
|
|
|
|
></div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
@ -225,8 +248,15 @@ const VodProductDesign = ({ |
|
|
|
|
|
|
|
|
|
export default VodProductDesign; |
|
|
|
|
|
|
|
|
|
// text colors i used:
|
|
|
|
|
// text-productPrice
|
|
|
|
|
// text colors i used for product title:
|
|
|
|
|
// text-darkCrimsonTextColor
|
|
|
|
|
// text-productTitle
|
|
|
|
|
|
|
|
|
|
// text color i used for product excerpt:
|
|
|
|
|
// text-productContent
|
|
|
|
|
|
|
|
|
|
// text color i used for product cat:
|
|
|
|
|
// text-darkCrimsonTextColor
|
|
|
|
|
|
|
|
|
|
VodProductDesign.defaultProps = { |
|
|
|
|
// icons on product image
|
|
|
|
|
@ -235,7 +265,7 @@ VodProductDesign.defaultProps = { |
|
|
|
|
discount: true, |
|
|
|
|
discountPricePercent: true, |
|
|
|
|
// product price
|
|
|
|
|
discountPrice: true, |
|
|
|
|
discountPrice: false, |
|
|
|
|
priceHolder: true, |
|
|
|
|
priceTitle: false, |
|
|
|
|
|
|
|
|
|
@ -248,10 +278,35 @@ VodProductDesign.defaultProps = { |
|
|
|
|
addToCartHolder: false, |
|
|
|
|
|
|
|
|
|
productTitleColor: "text-darkCrimsonTextColor", |
|
|
|
|
|
|
|
|
|
productExcerptTextColor: "text-productContent", |
|
|
|
|
|
|
|
|
|
productCatTextColor: "text-darkCrimsonTextColor", |
|
|
|
|
|
|
|
|
|
productPriceAmountTitle: "text-productPrice", |
|
|
|
|
productTitleAlignment: "text-justify", |
|
|
|
|
|
|
|
|
|
// برای درصد دادن به عرض رنج
|
|
|
|
|
rangeWidth: "w-44", |
|
|
|
|
|
|
|
|
|
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
|
|
|
|
|
productHolderBorder: "border", |
|
|
|
|
productHolderBorderColor: "border-grayBorderColor", |
|
|
|
|
productTitleAlignment: "text-justify", |
|
|
|
|
|
|
|
|
|
priceDirection: "flex-row", |
|
|
|
|
|
|
|
|
|
productTitleCategoryHolder: "flex-row", |
|
|
|
|
productTitleCategoryHolderAlignment: "items-center", |
|
|
|
|
|
|
|
|
|
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
|
|
|
|
|
// یادمون باشه که حتما رویه
|
|
|
|
|
// flex-col-reverse
|
|
|
|
|
// بزاریم
|
|
|
|
|
|
|
|
|
|
// دیفالتش باید این باشه:
|
|
|
|
|
// priceStarHolder: flex-row
|
|
|
|
|
priceStarHolder: "flex-row", |
|
|
|
|
// دیفالتش باید این باشه:
|
|
|
|
|
// priceStarHolder: items-center
|
|
|
|
|
priceStarAlignment: "items-center", |
|
|
|
|
}; |
|
|
|
|
|
