master
mahdi 3 years ago
parent a6fd7115ab
commit 0dc89d9a9c
  1. BIN
      src/assets/images/watermelon.png
  2. 164
      src/components/productDesign/ProductDesign.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

@ -3,6 +3,8 @@ import "./ProductDesign.scss";
import StarRating from "../starRating/StarRating"; import StarRating from "../starRating/StarRating";
import book from "../../assets/images/goldon.png"; import book from "../../assets/images/goldon.png";
import watermelon from "../../assets/images/watermelon.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg"; import heart from "../../assets/icons/vuesax-linear-heart.svg";
import discountImg from "../../assets/icons/discount.png"; import discountImg from "../../assets/icons/discount.png";
@ -27,6 +29,9 @@ const ProductDesign = ({
productHolderBorderColor, productHolderBorderColor,
productTitleColor, productTitleColor,
productCat, productCat,
rangeHolder,
verticalImg,
horizontalImg,
}) => { }) => {
return ( return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -72,7 +77,7 @@ const ProductDesign = ({
<div className="flex flex-wrap sm:flex-nowrap justify-around"> <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 flex flex-wrap items-center justify-around my-10 px-4">
<div <div
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} 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"> <div className="w-full relative">
{discountPricePercent && ( {discountPricePercent && (
@ -94,7 +99,12 @@ const ProductDesign = ({
)} )}
{/* img Holder */} {/* img Holder */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" /> {verticalImg && (
<img src={book} alt="" className="w-full rounded-lg" />
)}
{horizontalImg && (
<img src={watermelon} alt="" className="w-full rounded-lg" />
)}
</div> </div>
{/* select Color */} {/* select Color */}
{colors && ( {colors && (
@ -106,79 +116,85 @@ const ProductDesign = ({
</div> </div>
)} )}
</div> </div>
<div className="mt-4"> <div className="px-2">
<h2 <div className="mt-4">
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} <h2
> className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
نسخه چاپی علموم تجربه هفتم >
</h2> نسخه چاپی علموم تجربه هفتم
{productContent && ( </h2>
<p className="text-justify text-productContent mt-2 text-xs leading-6"> {productContent && (
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب <p className="text-justify text-productContent mt-2 text-xs leading-6">
دیگری نیز دارد. این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
</p> خوب دیگری نیز دارد.
)} </p>
{productCat && ( )}
<span className="text-darkCrimsonTextColor text-xs font-light"> {productCat && (
پایه سوم <span className="text-darkCrimsonTextColor text-xs font-light">
</span> پایه سوم
)} </span>
</div> )}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div> </div>
)} {star && (
{priceHolder && ( <div className="flex items-center mt-2">
<div <StarRating />
className={`flex items-center justify-between ${priceDirection}`} <span className="text-xs text-productContent font-bold mr-2">
> 39
{/* price */} </span>
<div className="mt-2"> </div>
<div )}
className={`${ {priceHolder && (
priceDirection.indexOf("col") !== -1 ? "inline" : "flex" <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" : ""
}`} }`}
> >
<span className="text-xs text-borderColor ml-2">قیمت</span> اضافه کردن به سبد خرید
{discountPrice && ( </button>
<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> </div>
{/* add to cart */} )}
<button {productTags && (
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${ <div className="mt-2 flex flex-wrap">
priceDirection.indexOf("col") !== -1 ? "w-full" : "" <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> </button>
)} <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
{productTags && ( دسته بندی به صورت کادو
<div className="mt-2 flex flex-wrap"> </button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> </div>
ارسال رایگان )}
</button> {rangeHolder && (
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
برچسب های دیگر <div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
</button> </div>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> )}
دسته بندی به صورت کادو
</button>
</div>
)}
<div className="bg-rangeBgColor h-3 w-full rounded mt-4">
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
</div> </div>
</div> </div>
</div> </div>
@ -204,11 +220,15 @@ ProductDesign.defaultProps = {
productTags: false, productTags: false,
priceHolder: false, priceHolder: false,
productCat: true, productCat: true,
rangeHolder: true,
verticalImg: false,
horizontalImg: true,
productTitleColor: "text-darkCrimsonTextColor", productTitleColor: "text-darkCrimsonTextColor",
productHolderBorder: "border-0", productHolderBorder: "border-0",
productHolderBorderColor: "border-grayBorderColor", productHolderBorderColor: "border-grayBorderColor",
priceDirection: "flex-row",
productTitleAlignment: "text-justify", productTitleAlignment: "text-justify",
priceDirection: "flex-row",
}; };
// border-2 border-productDesignBorderColor // border-2 border-productDesignBorderColor

Loading…
Cancel
Save