update

src/App.js

@@ -17,7 +17,7 @@ function App() {
   return (
     <div className="App">
       <ProductDesign />
-      {/* <VodProductDesign /> */}
+      <VodProductDesign />
       {/* <BookDesign /> */}
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}

src/components/productDesign/ProductDesign.js

@@ -101,7 +101,7 @@ const ProductDesign = ({
                   </div>
                 )}
                 {discount && (
-                  <div className="absolute rounded-md mt-2">
+                  <div className="rounded-md mt-2">
                     <img src={discountImg} alt="" className="w-full" />
                   </div>
                 )}

src/components/vodProductDesign/VodProductDesign.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 import StarRating from "../starRating/StarRating";
+import ReactTooltip from "react-tooltip";
 
 import book from "../../assets/images/goldon.png";
 import watermelon from "../../assets/images/watermelon.png";
@@ -35,8 +36,6 @@ const VodProductDesign = ({
   priceTitle,
   productPriceAmountTitle,
   addToCartHolder,
-  verticalImg,
-  horizontalImg,
 }) => {
   return (
     <section className="w-3/6	 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -68,6 +67,25 @@ const VodProductDesign = ({
                 minHeight: "180px",
               }}
             >
+              <div className="absolute left-2 top-2">
+                {discountPricePercent && (
+                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
+                    <p className="text-discountPriceTitle font-bold text-xs">
+                      23<span>%</span>
+                    </p>
+                  </div>
+                )}
+                {likeBtn && (
+                  <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2">
+                    <img src={heart} alt="" className="w-5" />
+                  </div>
+                )}
+                {discount && (
+                  <div className="rounded-md mt-2">
+                    <img src={discountImg} alt="" className="w-full" />
+                  </div>
+                )}
+              </div>
               {/* play button */}
               <div className="bg-playButtonIcon rounded-full p-4">
                 <img src={whitePlayIcon} alt="" className="w-5 h-5" />
@@ -75,10 +93,34 @@ const VodProductDesign = ({
               {/* select Color */}
               {colors && (
                 <div className="flex items-center absolute right-2 bottom-2">
-                  <img src={YellowDotIcon} alt="" className="w-3 h-3" />
+                  <img
-                  <img src={RedDotIcon} alt="" className="w-3 h-3" />
+                    src={YellowDotIcon}
-                  <img src={PurpleDotIcon} alt="" className="w-3 h-3" />
+                    alt=""
-                  <img src={LightBlueDotIcon} alt="" className="w-3 h-3" />
+                    data-tip="زرد"
+                    className="w-3 h-3 ml-1 cursor-pointer"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
+                  <img
+                    src={RedDotIcon}
+                    alt=""
+                    data-tip="قرمز"
+                    className="w-3 h-3 ml-1 cursor-pointer"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
+                  <img
+                    src={PurpleDotIcon}
+                    alt=""
+                    data-tip="بنفش"
+                    className="w-3 h-3 ml-1 cursor-pointer"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
+                  <img
+                    src={LightBlueDotIcon}
+                    alt=""
+                    data-tip="آبی"
+                    className="w-3 h-3 ml-1 cursor-pointer"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
                 </div>
               )}
             </div>
@@ -187,11 +229,11 @@ export default VodProductDesign;
 // text-productPrice
 
 VodProductDesign.defaultProps = {
-  colors: false,
+  colors: true,
-  likeBtn: false,
+  likeBtn: true,
-  discount: false,
+  discount: true,
-  discountPricePercent: false,
+  discountPricePercent: true,
-  discountPrice: false,
+  discountPrice: true,
   productContent: false,
   star: true,
   productTags: false,
@@ -199,8 +241,6 @@ VodProductDesign.defaultProps = {
   priceTitle: false,
   productCat: true,
   rangeHolder: true,
-  verticalImg: false,
-  horizontalImg: true,
   addToCartHolder: false,
 
   productTitleColor: "text-darkCrimsonTextColor",