update

src/components/productDesign/ProductDesign.js

@@ -5,15 +5,13 @@ 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";
 
-import heart from "../../assets/icons/vuesax-linear-heart.svg";
 import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
 import RedDotIcon from "../../assets/icons/redDotIcon.svg";
 import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
 import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
-import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
-import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg";
 
 const ProductDesign = ({
   colors,
@@ -79,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} bg-green-100`}
+            className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
           >
             <div className="w-full relative">
               {discountPricePercent && (
@@ -108,11 +106,6 @@ const ProductDesign = ({
                   <img src={watermelon} alt="" className="w-full rounded-lg" />
                 )}
               </div>
-              {/* play button */}
-              <div className="bg-red-900">
-                <img src={whitePlayIcon} alt="" />
-                {/* transform -translate-x-1/2 -translate-y-1/2 */}
-              </div>
               {/* select Color */}
               {colors && (
                 <div className="flex items-center absolute right-2 bottom-2">
@@ -217,19 +210,19 @@ export default ProductDesign;
 // text-productTitle
 
 ProductDesign.defaultProps = {
-  colors: false,
-  likeBtn: false,
-  discount: false,
-  discountPricePercent: false,
-  discountPrice: false,
-  productContent: false,
-  star: false,
-  productTags: false,
-  priceHolder: false,
+  colors: true,
+  likeBtn: true,
+  discount: true,
+  discountPricePercent: true,
+  discountPrice: true,
+  productContent: true,
+  star: true,
+  productTags: true,
+  priceHolder: true,
   productCat: true,
   rangeHolder: true,
-  verticalImg: false,
-  horizontalImg: true,
+  verticalImg: true,
+  horizontalImg: false,
   productTitleColor: "text-darkCrimsonTextColor",
   productHolderBorder: "border-0",
   productHolderBorderColor: "border-grayBorderColor",

src/components/vodProductDesign/VodProductDesign.js

@@ -41,10 +41,10 @@ const VodProductDesign = ({
       <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-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
           >
             <div
-              className="w-full relative flex items-center justify-center"
+              className="w-full relative flex items-center justify-center cursor-pointer"
               style={{
                 backgroundImage: `url(${watermelon})`,
                 backgroundSize: "100% 100%",
@@ -55,7 +55,6 @@ const VodProductDesign = ({
               {/* play button */}
               <div className="bg-playButtonIcon rounded-full p-4">
                 <img src={whitePlayIcon} alt="" className="w-5 h-5" />
-                {/* transform -translate-x-1/2 -translate-y-1/2 */}
               </div>
               {/* select Color */}
               {colors && (
@@ -157,7 +156,7 @@ const VodProductDesign = ({
 export default VodProductDesign;
 
 VodProductDesign.defaultProps = {
-  colors: true,
+  colors: false,
   likeBtn: false,
   discount: false,
   discountPricePercent: false,