update

src/components/productDesign/ProductDesign.js

@@ -37,6 +37,7 @@ const ProductDesign = ({
   verticalImg,
   horizontalImg,
   rangeWidth,
+  addToCartHolder,
 }) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -153,13 +154,13 @@ const ProductDesign = ({
             <div className="px-2">
               <div className="mt-4">
                 <h2
-                  className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`}
+                  className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
                 >
                   نسخه چاپی علموم تجربه هفتم
                 </h2>
                 {productContent && (
                   <p
-                    className={`text-justify mt-2 text-sm leading-6 ${productExcerptTextColor}`}
+                    className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
                   >
                     این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
                     خوب دیگری نیز دارد.
@@ -206,13 +207,15 @@ const ProductDesign = ({
                     </p>
                   </div>
                   {/* add to cart */}
-                  <button
+                  {addToCartHolder && (
-                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
+                    <button
-                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
+                      className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
-                    }`}
+                        priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                  >
+                      }`}
-                    اضافه کردن به سبد خرید
+                    >
-                  </button>
+                      اضافه کردن به سبد خرید
+                    </button>
+                  )}
                 </div>
               )}
               {productTags && (
@@ -275,6 +278,8 @@ ProductDesign.defaultProps = {
   verticalImg: true,
   horizontalImg: false,
 
+  addToCartHolder: true,
+
   productTitleColor: "text-productTitle",
 
   productExcerptTextColor: "text-productContent",

src/components/vodProductDesign/VodProductDesign.js

@@ -3,6 +3,8 @@ import React from "react";
 import StarRating from "../starRating/StarRating";
 import ReactTooltip from "react-tooltip";
 
+import "./VodProductDesign.scss";
+
 import book from "../../assets/images/goldon.png";
 import watermelon from "../../assets/images/watermelon.png";
 
@@ -31,11 +33,18 @@ const VodProductDesign = ({
   productHolderBorder,
   productHolderBorderColor,
   productTitleColor,
+  productExcerptTextColor,
   productCat,
+  productCatTextColor,
   rangeHolder,
   priceTitle,
   productPriceAmountTitle,
   addToCartHolder,
+  productTitleCategoryHolder,
+  productTitleCategoryHolderAlignment,
+  priceStarHolder,
+  priceStarAlignment,
+  rangeWidth,
 }) => {
   return (
     <section className="w-3/6	 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -57,9 +66,9 @@ const VodProductDesign = ({
           <div
             className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
           >
-            {/* img */}
+            {/* product image */}
             <div
-              className="w-full relative flex items-center justify-center cursor-pointer"
+              className="parent-img w-full relative flex items-center justify-center cursor-pointer"
               style={{
                 backgroundImage: `url(${watermelon})`,
                 backgroundSize: "100% 100%",
@@ -67,6 +76,7 @@ const VodProductDesign = ({
                 minHeight: "180px",
               }}
             >
+              {/* icons on image */}
               <div className="absolute left-2 top-2">
                 {discountPricePercent && (
                   <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
@@ -87,7 +97,7 @@ const VodProductDesign = ({
                 )}
               </div>
               {/* play button */}
-              <div className="bg-playButtonIcon rounded-full p-4">
+              <div className="playBtnImg bg-playButtonIcon rounded-full p-4">
                 <img src={whitePlayIcon} alt="" className="w-5 h-5" />
               </div>
               {/* select Color */}
@@ -124,34 +134,45 @@ const VodProductDesign = ({
                 </div>
               )}
             </div>
+            {/* product content */}
             <div className="px-2">
               {/* content */}
-              <div className="mt-4 flex justify-between items-center">
+              <div className="mt-4 flex flex-col">
-                <h2
+                <div
-                  className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
+                  className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
                 >
-                  نسخه چاپی علموم تجربه هفتم
+                  <h2
-                </h2>
+                    className={`leading-4 text-sm mb-2 ${productTitleColor} ${productTitleAlignment}`}
+                  >
+                    نسخه چاپی علموم تجربه هفتم
+                  </h2>
+                  {productCat && (
+                    <span
+                      className={`text-xs font-light ${productCatTextColor}`}
+                    >
+                      پایه سوم
+                    </span>
+                  )}
+                </div>
                 {productContent && (
-                  <p className="text-justify text-productContent mt-2 text-xs leading-6">
+                  <p
+                    className={`text-justify text-xs leading-6 ${productExcerptTextColor}`}
+                  >
                     این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
                     خوب دیگری نیز دارد.
                   </p>
                 )}
-                {productCat && (
-                  <span className="text-darkCrimsonTextColor text-xs font-light">
-                    پایه سوم
-                  </span>
-                )}
               </div>
               {/* price */}
-              <div className="flex items-center justify-between mt-2">
+              <div
+                className={`flex ${priceStarHolder} ${priceStarAlignment}  justify-between mt-2`}
+              >
                 {priceHolder && (
                   <div
                     className={`flex items-center justify-between ${priceDirection}`}
                   >
                     {/* price */}
-                    <div className="mt-2">
+                    <div className="">
                       <div
                         className={`${
                           priceDirection.indexOf("col") !== -1
@@ -179,7 +200,7 @@ const VodProductDesign = ({
                     {/* add to cart */}
                     {addToCartHolder && (
                       <button
-                        className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2  ${
+                        className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2  ${
                           priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                         }`}
                       >
@@ -189,7 +210,7 @@ const VodProductDesign = ({
                   </div>
                 )}
                 {star && (
-                  <div className="flex items-center mt-2">
+                  <div className="flex items-center">
                     <StarRating />
                     <span className="text-xs text-productContent font-bold mr-2">
                       39
@@ -211,8 +232,10 @@ const VodProductDesign = ({
                 </div>
               )}
               {rangeHolder && (
-                <div className="bg-rangeBgColor h-3 w-full rounded mt-4">
+                <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
-                  <div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
+                  <div
+                    className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
+                  ></div>
                 </div>
               )}
             </div>
@@ -225,8 +248,15 @@ const VodProductDesign = ({
 
 export default VodProductDesign;
 
-// text colors i used:
+// text colors i used for product title:
-// text-productPrice
+// text-darkCrimsonTextColor
+// text-productTitle
+
+// text color i used for product excerpt:
+// text-productContent
+
+// text color i used for product cat:
+// text-darkCrimsonTextColor
 
 VodProductDesign.defaultProps = {
   // icons on product image
@@ -235,7 +265,7 @@ VodProductDesign.defaultProps = {
   discount: true,
   discountPricePercent: true,
   // product price
-  discountPrice: true,
+  discountPrice: false,
   priceHolder: true,
   priceTitle: false,
 
@@ -248,10 +278,35 @@ VodProductDesign.defaultProps = {
   addToCartHolder: false,
 
   productTitleColor: "text-darkCrimsonTextColor",
+
+  productExcerptTextColor: "text-productContent",
+
+  productCatTextColor: "text-darkCrimsonTextColor",
+
   productPriceAmountTitle: "text-productPrice",
+  productTitleAlignment: "text-justify",
+
+  // برای درصد دادن به عرض رنج
+  rangeWidth: "w-44",
+
+  //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
   productHolderBorder: "border",
   productHolderBorderColor: "border-grayBorderColor",
-  productTitleAlignment: "text-justify",
 
   priceDirection: "flex-row",
+
+  productTitleCategoryHolder: "flex-row",
+  productTitleCategoryHolderAlignment: "items-center",
+
+  // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
+  // یادمون باشه که حتما رویه
+  // flex-col-reverse
+  // بزاریم
+
+  // دیفالتش باید این باشه:
+  // priceStarHolder: flex-row
+  priceStarHolder: "flex-row",
+  // دیفالتش باید این باشه:
+  // priceStarHolder: items-center
+  priceStarAlignment: "items-center",
 };

src/components/vodProductDesign/VodProductDesign.scss

@@ -0,0 +1,7 @@
+.playBtnImg {
+  transition: all 0.4s;
+}
+.parent-img:hover .playBtnImg {
+  transition: all 0.4s;
+  transform: translateY(-10px) !important;
+}