mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent a6fd7115ab
commit 0dc89d9a9c
2 changed files with 92 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/watermelon.png
  2. 164
      src/components/productDesign/ProductDesign.js

BIN
src/assets/images/watermelon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

164
src/components/productDesign/ProductDesign.js
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save