update src/components/SingleProduct/ProductDesign1/index.js and src/components/SingleProduct/VodDesign1/index.js

src/components/SingleProduct/VodDesign1/index.js

@@ -7,32 +7,35 @@ import StarRating from "../../Rating/StarRating1";
 import Tooptip1 from "../../Tooltip/Tooltip1";
 import AnimatedProgressbar1 from "../../ProgressBar/AnimatedProgressbar1";
 
-import watermelon from "images/VodDesign1watermelon.png";
-import video from "images/VodDesign1danovin.mp4";
-
-import discountImg from "images/VodDesign1discount.png";
-
-import heart from "images/VodDesign1vuesax-linear-heart.svg";
-import YellowDotIcon from "images/VodDesign1yellowDotIcon.svg";
-import RedDotIcon from "images/VodDesign1redDotIcon.svg";
-import PurpleDotIcon from "images/VodDesign1purpleDotIcon.svg";
-import LightBlueDotIcon from "images/VodDesign1ightBlueDotIcon.svg";
-import whitePlayIcon from "images/VodDesign1white-play-button-icon.svg";
-
 const VodDesign1 = ({
-  productColor,
+  productHolderClassname,
-  colors,
+
+  discountPricePercent,
   likeBtn,
   discount,
-  discountPricePercent,
+
-  discountPrice,
+  tooltip,
+
+  productTitle,
+  productTitleClass,
+
   productContent,
+  productContentClass,
+
+  productCat,
+
   star,
+
+  discountPrice,
+  price,
+
+  progressBar,
+
   productTags,
+
   priceDirection,
   productTitleAlignment,
   priceHolder,
-  productCat,
   rangeHolder,
   priceTitle,
   addToCartHolder,
@@ -40,18 +43,15 @@ const VodDesign1 = ({
   productTitleCategoryHolderAlignment,
   priceStarHolder,
   priceStarAlignment,
-  rangeWidth,
 }) => {
   return (
-    <div>
+    <>
-      <div
+      <div className={`${productHolderClassname}`}>
-        className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
-      >
         {/* product image */}
         <div
           className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
           style={{
-            backgroundImage: `url(${watermelon})`,
+            backgroundImage: `url("images/VodDesign1watermelon.png")`,
             backgroundSize: "100% 100%",
             backgroundRepeat: "no-repeat",
             minHeight: "180px",
@@ -88,39 +88,20 @@ const VodDesign1 = ({
           </div>
           {/* play button */}
           <div
-            className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
+            className="rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-[#0D0D0D99]"
             // onClick={() => setOpenModal(true)}
           >
             <img
-              src={whitePlayIcon}
+              src="images/VodDesign1white-play-button-icon.svg"
               alt=""
-              className="w-5 h-5"
+              className="w-5"
               // onClick={() => setOpenModal(true)}
             />
           </div>
           {/* select Color */}
           {tooltip && (
             <div className="flex items-center gap-x-1 absolute right-2 bottom-2">
-              <Tooptip1
+              <Tooptip1 />
-                items={[
-                  {
-                    image: "images/SingleProductyellowDotIcon.svg",
-                    dataTip: "زرد",
-                  },
-                  {
-                    image: "images/SingleProductredDotIcon.svg",
-                    dataTip: "قرمز",
-                  },
-                  {
-                    image: "images/SingleProductpurpleDotIcon.svg",
-                    dataTip: "بنفش",
-                  },
-                  {
-                    image: "images/SingleProductlightBlueDotIcon.svg",
-                    dataTip: "آبی",
-                  },
-                ]}
-              />
             </div>
           )}
         </div>
@@ -245,46 +226,32 @@ const VodDesign1 = ({
                 controls
                 className={`border transition-all duration-1000
       `}
-                src={video}
+                src="images/VodDesign1danovin.mp4"
                 type="video/mp4"
               ></video>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
 export default VodDesign1;
 
 VodDesign1.defaultProps = {
-  colors: [
+  productHolderClassname:
-    {
+    "min-w-[600px] rounded-lg shadow-sm p-20 border border-[#C3C3C3]",
-      icon: YellowDotIcon,
+
-      dataType: "زرد",
+  discountPricePercent: "23",
-    },
+  likeBtn: true,
-    {
+  discount: true,
-      icon: RedDotIcon,
-      dataType: "قرمز",
-    },
-    {
-      icon: PurpleDotIcon,
-      dataType: "بنفش",
-    },
-    {
-      icon: LightBlueDotIcon,
-      dataType: "آبی",
-    },
 
-    LightBlueDotIcon,
+  productTitle: "نسخه چاپی علموم تجربه هفتم",
-  ],
+  productTitleClass: "text-sm text-justify text-[#246E8A]",
 
   // icons on product image
   productColor: true,
-  likeBtn: true,
-  discount: true,
-  discountPricePercent: true,
   // product price
   discountPrice: true,
   priceHolder: true,
@@ -301,22 +268,12 @@ VodDesign1.defaultProps = {
   productTitleAlignment: "text-justify",
 
   // برای درصد دادن به عرض رنج
-  rangeWidth: "75%",
 
   priceDirection: "flex-row",
 
   productTitleCategoryHolder: "flex-row",
   productTitleCategoryHolderAlignment: "items-center",
 
-  // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
-  // یادمون باشه که حتما رویه
-  // flex-col-reverse
-  // بزاریم
-
-  // دیفالتش باید این باشه:
-  // priceStarHolder: flex-row
   priceStarHolder: "flex-row",
-  // دیفالتش باید این باشه:
-  // priceStarHolder: items-center
   priceStarAlignment: "items-center",
 };