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.
241 lines
9.2 KiB
241 lines
9.2 KiB
import React from "react"; |
|
import "./ProductDesign.scss"; |
|
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 ProductDesign = ({ |
|
colors, |
|
likeBtn, |
|
discount, |
|
discountPricePercent, |
|
discountPrice, |
|
productContent, |
|
star, |
|
productTags, |
|
priceDirection, |
|
productTitleAlignment, |
|
priceHolder, |
|
productHolderBorder, |
|
productHolderBorderColor, |
|
productTitleColor, |
|
productCat, |
|
rangeHolder, |
|
verticalImg, |
|
horizontalImg, |
|
}) => { |
|
return ( |
|
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
|
{/* title holder */} |
|
<div className="flex items-center justify-between mb-6"> |
|
<h2 className="text-lg text-$productTitle">آیتم محصولات</h2> |
|
<button className="bg-indigo-500 text-white rounded shadow-lg p-2"> |
|
مشاهده تمام محصولات |
|
</button> |
|
</div> |
|
<div> |
|
<p className="leading-10"> |
|
نام این کامپوننت |
|
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
productDesign |
|
</span> |
|
است و داخل این کامپوننت شما میتوانید با |
|
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
true - false |
|
</span> |
|
کردن |
|
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
Props |
|
</span> |
|
ها به صورت داینامیک دیزاین های مختلفی را مشاهده کنید شما همچنین |
|
میتوانید با تغییر دادن مقدار <span>PriceDirection</span> به یکی از این |
|
ها: |
|
<br /> |
|
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
flex-row/flex-row-reverse/flex-column/flex-column-reverse |
|
</span> |
|
دیزاین های متفاوتی را برای قسمت قیمت و اضافه کردن به سبد خرید هر محصول |
|
ببینید. |
|
</p> |
|
<p className="mt-4 leading-7 "> |
|
برای نمایش ستاره ها من از یک کامپوننت استفاده کردم ==== |
|
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
Star Rating |
|
</span> |
|
</p> |
|
</div> |
|
{/* 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} bg-green-100`} |
|
> |
|
<div className="w-full relative"> |
|
{discountPricePercent && ( |
|
<div className="bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1"> |
|
<p className="text-discountPriceTitle font-bold text-xs"> |
|
23<span>%</span> |
|
</p> |
|
</div> |
|
)} |
|
{likeBtn && ( |
|
<div className="bg-likeBtnBg absolute left-2 top-10 rounded-md p-1"> |
|
<img src={heart} alt="" className="w-full" /> |
|
</div> |
|
)} |
|
{discount && ( |
|
<div className="absolute left-2 top-20 rounded-md"> |
|
<img src={discountImg} alt="" className="w-full" /> |
|
</div> |
|
)} |
|
{/* img Holder */} |
|
<div className="flex-shrink-0"> |
|
{verticalImg && ( |
|
<img src={book} alt="" className="w-full rounded-lg" /> |
|
)} |
|
{horizontalImg && ( |
|
<img src={watermelon} alt="" className="w-full rounded-lg" /> |
|
)} |
|
</div> |
|
{/* play button */} |
|
<div className="bg-red-900"> |
|
<img src={whitePlayIcon} alt="" /> |
|
{/* 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 ProductDesign; |
|
|
|
// text colors i used for product title: |
|
// text-darkCrimsonTextColor |
|
// text-productTitle |
|
|
|
ProductDesign.defaultProps = { |
|
colors: false, |
|
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", |
|
}; |
|
|
|
// border-2 border-productDesignBorderColor
|
|
|