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">
+                {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,6 +116,7 @@ const ProductDesign = ({
                 </div>
               )}
             </div>
+            <div className="px-2">
               <div className="mt-4">
                 <h2
                   className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
@@ -114,8 +125,8 @@ const ProductDesign = ({
                 </h2>
                 {productContent && (
                   <p className="text-justify text-productContent mt-2 text-xs leading-6">
-                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
-                  دیگری نیز دارد.
+                    این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
+                    خوب دیگری نیز دارد.
                   </p>
                 )}
                 {productCat && (
@@ -143,7 +154,9 @@ const ProductDesign = ({
                         priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
                       }`}
                     >
-                    <span className="text-xs text-borderColor ml-2">قیمت</span>
+                      <span className="text-xs text-borderColor ml-2">
+                        قیمت
+                      </span>
                       {discountPrice && (
                         <p className="line-through text-xs text-borderColor mr-2">
                           145<span>تومان</span>
@@ -177,9 +190,12 @@ const ProductDesign = ({
                   </button>
                 </div>
               )}
-            <div className="bg-rangeBgColor h-3 w-full rounded mt-4">
+              {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>
@@ -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