parent
0dc89d9a9c
commit
7197613a94
6 changed files with 196 additions and 1 deletions
|
After Width: | Height: | Size: 308 B |
|
After Width: | Height: | Size: 305 B |
@ -0,0 +1,179 @@ |
||||
import React from "react"; |
||||
|
||||
import StarRating from "../starRating/StarRating"; |
||||
|
||||
import book from "../../assets/images/goldon.png"; |
||||
import watermelon from "../../assets/images/watermelon.png"; |
||||
|
||||
import discountImg from "../../assets/icons/discount.png"; |
||||
|
||||
import heart from "../../assets/icons/vuesax-linear-heart.svg"; |
||||
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg"; |
||||
import RedDotIcon from "../../assets/icons/redDotIcon.svg"; |
||||
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg"; |
||||
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg"; |
||||
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg"; |
||||
import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg"; |
||||
|
||||
const VodProductDesign = ({ |
||||
colors, |
||||
likeBtn, |
||||
discount, |
||||
discountPricePercent, |
||||
discountPrice, |
||||
productContent, |
||||
star, |
||||
productTags, |
||||
priceDirection, |
||||
productTitleAlignment, |
||||
priceHolder, |
||||
productHolderBorder, |
||||
productHolderBorderColor, |
||||
productTitleColor, |
||||
productCat, |
||||
rangeHolder, |
||||
verticalImg, |
||||
horizontalImg, |
||||
}) => { |
||||
return ( |
||||
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
||||
{/* product UI Design */} |
||||
<div className="flex flex-wrap sm:flex-nowrap justify-around"> |
||||
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4"> |
||||
<div |
||||
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} |
||||
> |
||||
<div |
||||
className="w-full relative flex items-center justify-center" |
||||
style={{ |
||||
backgroundImage: `url(${watermelon})`, |
||||
backgroundSize: "100% 100%", |
||||
backgroundRepeat: "no-repeat", |
||||
minHeight: "180px", |
||||
}} |
||||
> |
||||
{/* play button */} |
||||
<div className="bg-playButtonIcon rounded-full p-4"> |
||||
<img src={whitePlayIcon} alt="" className="w-5 h-5" /> |
||||
{/* transform -translate-x-1/2 -translate-y-1/2 */} |
||||
</div> |
||||
{/* select Color */} |
||||
{colors && ( |
||||
<div className="flex items-center absolute right-2 bottom-2"> |
||||
<img src={YellowDotIcon} alt="" className="w-3 h-3" /> |
||||
<img src={RedDotIcon} alt="" className="w-3 h-3" /> |
||||
<img src={PurpleDotIcon} alt="" className="w-3 h-3" /> |
||||
<img src={LightBlueDotIcon} alt="" className="w-3 h-3" /> |
||||
</div> |
||||
)} |
||||
</div> |
||||
<div className="px-2"> |
||||
<div className="mt-4"> |
||||
<h2 |
||||
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} |
||||
> |
||||
نسخه چاپی علموم تجربه هفتم |
||||
</h2> |
||||
{productContent && ( |
||||
<p className="text-justify text-productContent mt-2 text-xs leading-6"> |
||||
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های |
||||
خوب دیگری نیز دارد. |
||||
</p> |
||||
)} |
||||
{productCat && ( |
||||
<span className="text-darkCrimsonTextColor text-xs font-light"> |
||||
پایه سوم |
||||
</span> |
||||
)} |
||||
</div> |
||||
{star && ( |
||||
<div className="flex items-center mt-2"> |
||||
<StarRating /> |
||||
<span className="text-xs text-productContent font-bold mr-2"> |
||||
39 |
||||
</span> |
||||
</div> |
||||
)} |
||||
{priceHolder && ( |
||||
<div |
||||
className={`flex items-center justify-between ${priceDirection}`} |
||||
> |
||||
{/* price */} |
||||
<div className="mt-2"> |
||||
<div |
||||
className={`${ |
||||
priceDirection.indexOf("col") !== -1 ? "inline" : "flex" |
||||
}`}
|
||||
> |
||||
<span className="text-xs text-borderColor ml-2"> |
||||
قیمت |
||||
</span> |
||||
{discountPrice && ( |
||||
<p className="line-through text-xs text-borderColor mr-2"> |
||||
145<span>تومان</span> |
||||
</p> |
||||
)} |
||||
</div> |
||||
<p className="text-sm text-productPrice font-semibold inline"> |
||||
145.000<span>تومان</span> |
||||
</p> |
||||
</div> |
||||
{/* add to cart */} |
||||
<button |
||||
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${ |
||||
priceDirection.indexOf("col") !== -1 ? "w-full" : "" |
||||
}`}
|
||||
> |
||||
اضافه کردن به سبد خرید |
||||
</button> |
||||
</div> |
||||
)} |
||||
{productTags && ( |
||||
<div className="mt-2 flex flex-wrap"> |
||||
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||
ارسال رایگان |
||||
</button> |
||||
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||
برچسب های دیگر |
||||
</button> |
||||
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
||||
دسته بندی به صورت کادو |
||||
</button> |
||||
</div> |
||||
)} |
||||
{rangeHolder && ( |
||||
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
||||
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default VodProductDesign; |
||||
|
||||
VodProductDesign.defaultProps = { |
||||
colors: true, |
||||
likeBtn: false, |
||||
discount: false, |
||||
discountPricePercent: false, |
||||
discountPrice: false, |
||||
productContent: false, |
||||
star: false, |
||||
productTags: false, |
||||
priceHolder: false, |
||||
productCat: true, |
||||
rangeHolder: true, |
||||
verticalImg: false, |
||||
horizontalImg: true, |
||||
productTitleColor: "text-darkCrimsonTextColor", |
||||
productHolderBorder: "border-0", |
||||
productHolderBorderColor: "border-grayBorderColor", |
||||
productTitleAlignment: "text-justify", |
||||
|
||||
priceDirection: "flex-row", |
||||
}; |
||||
Loading…
Reference in new issue