update

src/components/productDesign/ProductDesign.js

@@ -3,6 +3,8 @@ import "./ProductDesign.scss";
 import StarRating from "../starRating/StarRating";
 
 import book from "../../assets/images/goldon.png";
+import watermelon from "../../assets/images/watermelon.png";
+
 import heart from "../../assets/icons/vuesax-linear-heart.svg";
 import discountImg from "../../assets/icons/discount.png";
 
@@ -27,6 +29,9 @@ const ProductDesign = ({
   productHolderBorderColor,
   productTitleColor,
   productCat,
+  rangeHolder,
+  verticalImg,
+  horizontalImg,
 }) => {
   return (
     <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="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}`}
+            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 && (
@@ -94,7 +99,12 @@ const ProductDesign = ({
               )}
               {/* img Holder */}
               <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>
               {/* select Color */}
               {colors && (
@@ -106,79 +116,85 @@ const ProductDesign = ({
                 </div>
               )}
             </div>
-            <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 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>
-            )}
-            {priceHolder && (
-              <div
-                className={`flex items-center justify-between ${priceDirection}`}
-              >
-                {/* price */}
-                <div className="mt-2">
-                  <div
-                    className={`${
-                      priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+              {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" : ""
                     }`}
                   >
-                    <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>
+                    اضافه کردن به سبد خرید
+                  </button>
                 </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>
-            )}
-            <div className="bg-rangeBgColor h-3 w-full rounded mt-4">
-              <div className="bg-rangeFillBgColor h-3 w-44 rounded"></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>
@@ -204,11 +220,15 @@ ProductDesign.defaultProps = {
   productTags: false,
   priceHolder: false,
   productCat: true,
+  rangeHolder: true,
+  verticalImg: false,
+  horizontalImg: true,
   productTitleColor: "text-darkCrimsonTextColor",
   productHolderBorder: "border-0",
   productHolderBorderColor: "border-grayBorderColor",
-  priceDirection: "flex-row",
   productTitleAlignment: "text-justify",
+
+  priceDirection: "flex-row",
 };
 
 // border-2 border-productDesignBorderColor