From 24eae462b92178801ad8f777456991bbefb8bb9e Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sun, 15 May 2022 18:38:31 +0430
Subject: [PATCH] update src/components/SingleProduct/ProductDesign1/index.js
 and src/components/SingleProduct/VodDesign1/index.js

---
 .../SingleProduct/VodDesign1/index.js         | 362 ++++++++----------
 1 file changed, 170 insertions(+), 192 deletions(-)

diff --git a/src/components/SingleProduct/VodDesign1/index.js b/src/components/SingleProduct/VodDesign1/index.js
index 374943e..50df360 100644
--- a/src/components/SingleProduct/VodDesign1/index.js
+++ b/src/components/SingleProduct/VodDesign1/index.js
@@ -1,19 +1,23 @@
 import React, { useEffect, useState } from "react";
 
-import StarRating from "../StarRating";
-import ReactTooltip from "react-tooltip";
+import TagDesign1 from "../../Tag/TagDesign1";
+import ButtonDivTag from "../../ButtonDesign/ButtonDivTag";
+import Button from "../../ButtonDesign/Button";
+import StarRating from "../../Rating/StarRating1";
+import Tooptip1 from "../../Tooltip/Tooltip1";
+import AnimatedProgressbar1 from "../../ProgressBar/AnimatedProgressbar1";
 
-import watermelon from "./watermelon.png";
-import video from "./danovin.mp4";
+import watermelon from "images/VodDesign1watermelon.png";
+import video from "images/VodDesign1danovin.mp4";
 
-import discountImg from "./discount.png";
+import discountImg from "images/VodDesign1discount.png";
 
-import heart from "./vuesax-linear-heart.svg";
-import YellowDotIcon from "./yellowDotIcon.svg";
-import RedDotIcon from "./redDotIcon.svg";
-import PurpleDotIcon from "./purpleDotIcon.svg";
-import LightBlueDotIcon from "./lightBlueDotIcon.svg";
-import whitePlayIcon from "./white-play-button-icon.svg";
+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,
@@ -38,188 +42,176 @@ const VodDesign1 = ({
   priceStarAlignment,
   rangeWidth,
 }) => {
-  const [progressFlag, setProgressFlag] = useState(false);
-  // const [openModal, setOpenModal] = useState(false);
-  useEffect(() => {
-    setTimeout(() => {
-      setProgressFlag(true);
-    }, 1000);
-  });
   return (
-    <section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
-      رویه باتن پلی / عکس کلیک کنید
-      {/* product UI Design */}
-      <div className="flex flex-wrap sm:flex-nowrap justify-around">
-        <div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
+    <div>
+      <div
+        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})`,
+            backgroundSize: "100% 100%",
+            backgroundRepeat: "no-repeat",
+            minHeight: "180px",
+          }}
+          data-modal-toggle="large-modal"
+        >
+          {/* icons on image */}
+          <div className="flex flex-col gap-y-2 absolute left-2 top-2">
+            {discountPricePercent && (
+              <ButtonDivTag
+                icon={false}
+                text={discountPricePercent + "%"}
+                className="p-2 bg-[#4ACA5322] text-xs text-[#4ACA53] font-sansbold rounded-md"
+              />
+            )}
+            {likeBtn && (
+              <Button
+                className={"p-2 bg-[#FFF3F3] rounded"}
+                text={false}
+                icon={"images/SingleProductvuesax-linear-heart.svg"}
+                iconHolderClassName={""}
+                iconClassName={"w-5"}
+              />
+            )}
+            {discount && (
+              <Button
+                className={"rounded"}
+                text={false}
+                icon={"images/SingleProductdiscount.png"}
+                iconHolderClassName={""}
+                iconClassName={"w-10"}
+              />
+            )}
+          </div>
+          {/* play button */}
           <div
-            className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
+            className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
+            // onClick={() => setOpenModal(true)}
           >
-            {/* product image */}
+            <img
+              src={whitePlayIcon}
+              alt=""
+              className="w-5 h-5"
+              // onClick={() => setOpenModal(true)}
+            />
+          </div>
+          {/* select Color */}
+          {tooltip && (
+            <div className="flex items-center gap-x-1 absolute right-2 bottom-2">
+              <Tooptip1
+                items={[
+                  {
+                    image: "images/SingleProductyellowDotIcon.svg",
+                    dataTip: "زرد",
+                  },
+                  {
+                    image: "images/SingleProductredDotIcon.svg",
+                    dataTip: "قرمز",
+                  },
+                  {
+                    image: "images/SingleProductpurpleDotIcon.svg",
+                    dataTip: "بنفش",
+                  },
+                  {
+                    image: "images/SingleProductlightBlueDotIcon.svg",
+                    dataTip: "آبی",
+                  },
+                ]}
+              />
+            </div>
+          )}
+        </div>
+        {/* product content */}
+        <div className="px-2">
+          {/* content */}
+          <div className="mt-4 flex flex-col">
             <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})`,
-                backgroundSize: "100% 100%",
-                backgroundRepeat: "no-repeat",
-                minHeight: "180px",
-              }}
-              data-modal-toggle="large-modal"
+              className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
             >
-              {/* icons on image */}
-              <div className="absolute left-2 top-2">
-                {discountPricePercent && (
-                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
-                    <p className="text-discountPriceTitle font-sansbold text-xs">
-                      23<span>%</span>
-                    </p>
-                  </div>
-                )}
-                {likeBtn && (
-                  <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
-                    <img src={heart} alt="" className="w-5" />
-                  </div>
-                )}
-                {discount && (
-                  <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
-                    <img src={discountImg} alt="" className="w-full" />
-                  </div>
-                )}
-              </div>
-              {/* play button */}
-              <div
-                className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
-                // onClick={() => setOpenModal(true)}
-              >
-                <img
-                  src={whitePlayIcon}
-                  alt=""
-                  className="w-5 h-5"
-                  // onClick={() => setOpenModal(true)}
+              <h2 className={`${productTitleClass}`}>{productTitle}</h2>{" "}
+              {productCat && (
+                <TagDesign1
+                  tagClassName={"mt-2 text-xs text-[#246E8A] font-sansbold"}
+                  icon={false}
+                  title={"پایه سوم"}
                 />
-              </div>
-              {/* select Color */}
-              {productColor && (
-                <div className="flex items-center absolute right-2 bottom-2">
-                  {/* {colors.map((color,index))} */}
-                  <img
-                    src={YellowDotIcon}
-                    alt=""
-                    data-tip="زرد"
-                    className="w-3 h-3 ml-1 cursor-pointer"
-                  />
-                  <ReactTooltip place="top" type="dark" effect="float" />
-                </div>
               )}
             </div>
-            {/* product content */}
-            <div className="px-2">
-              {/* content */}
-              <div className="mt-4 flex flex-col">
-                <div
-                  className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
-                >
-                  <h2
-                    className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
-                  >
-                    نسخه چاپی علموم تجربه هفتم
-                  </h2>
-                  {productCat && (
-                    <span
-                      className={`text-xs font-light text-darkCrimsonTextColor`}
-                    >
-                      پایه سوم
-                    </span>
-                  )}
-                </div>
-                {productContent && (
-                  <p
-                    className={`text-justify text-sm leading-6 text-productContent`}
-                  >
-                    این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
-                    خوب دیگری نیز دارد.
-                  </p>
-                )}
-              </div>
-              {/* price */}
+            {/* productContent */}
+            {productContent && (
+              <p className={`${productContentClass}`}>{productContent}</p>
+            )}
+          </div>
+          {/* price */}
+          <div
+            className={`flex ${priceStarHolder} ${priceStarAlignment}  justify-between mt-2`}
+          >
+            {priceHolder && (
               <div
-                className={`flex ${priceStarHolder} ${priceStarAlignment}  justify-between mt-2`}
+                className={`flex items-center justify-between ${priceDirection}`}
               >
-                {priceHolder && (
+                {/* price */}
+                <div className="">
                   <div
-                    className={`flex items-center justify-between ${priceDirection}`}
+                    className={`${
+                      priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+                    }`}
                   >
-                    {/* price */}
-                    <div className="">
-                      <div
-                        className={`${
-                          priceDirection.indexOf("col") !== -1
-                            ? "inline"
-                            : "flex"
-                        }`}
-                      >
-                        {priceTitle && (
-                          <span className="text-xs text-borderColor ml-2">
-                            قیمت
-                          </span>
-                        )}
-                        {discountPrice && (
-                          <p className="line-through text-xs text-borderColor">
-                            <span> قیمت</span> 140<span>تومان</span>
-                          </p>
-                        )}
-                      </div>
-                      <p
-                        className={`text-sm font-semibold inline text-productPrice`}
-                      >
-                        111.000<span>تومان</span>
+                    {priceTitle && (
+                      <span className="text-xs text-borderColor ml-2">
+                        قیمت
+                      </span>
+                    )}
+                    {discountPrice && (
+                      <p className="line-through text-xs text-borderColor">
+                        <span> قیمت</span> 140<span>تومان</span>
                       </p>
-                    </div>
-                    {/* add to cart */}
-                    {addToCartHolder && (
-                      <button
-                        className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${
-                          priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                        }`}
-                      >
-                        اضافه کردن به سبد خرید
-                      </button>
                     )}
                   </div>
-                )}
-                {star && (
-                  <div className="flex items-center">
-                    <StarRating />
-                    <span className="text-xs text-productContent font-sansbold mr-2">
-                      39
-                    </span>
-                  </div>
+                  <p
+                    className={`text-sm font-semibold inline text-productPrice`}
+                  >
+                    111.000<span>تومان</span>
+                  </p>
+                </div>
+                {/* add to cart */}
+                {addToCartHolder && (
+                  <button
+                    className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${
+                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
+                    }`}
+                  >
+                    اضافه کردن به سبد خرید
+                  </button>
                 )}
               </div>
-              {productTags && (
-                <div className="mt-2 flex flex-wrap">
-                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
-                    ارسال رایگان
-                  </button>
-                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
-                    برچسب های دیگر
-                  </button>
-                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
-                    دسته بندی به صورت کادو
-                  </button>
-                </div>
-              )}
-              {rangeHolder && (
-                <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
-                  <div
-                    className={`bg-rangeFillBgColor h-3 rounded duration-500`}
-                    style={{
-                      width: progressFlag ? rangeWidth : 0,
-                    }}
-                  ></div>
-                </div>
-              )}
-            </div>
+            )}
+            {star && (
+              <div className="flex items-center mt-2">
+                <StarRating />
+                <span className="text-[#707070] text-sm font-sansbold mr-2">
+                  39
+                </span>
+              </div>
+            )}
           </div>
+          {productTags && (
+            <div className="mt-4 flex flex-wrap gap-2">
+              {productTags.map((item, index) => (
+                <TagDesign1 icon={false} title={item} key={index} />
+              ))}
+            </div>
+          )}
+          {progressBar && (
+            <AnimatedProgressbar1
+              rangeWidth={"75%"}
+              parentBg={"bg-[#D3E9FF] rtl mt-5"}
+              childBg={"bg-[#68A8E6]"}
+            />
+          )}
         </div>
       </div>
       <div
@@ -252,7 +244,7 @@ const VodDesign1 = ({
               <video
                 controls
                 className={`border transition-all duration-1000
-          `}
+      `}
                 src={video}
                 type="video/mp4"
               ></video>
@@ -260,25 +252,11 @@ const VodDesign1 = ({
           </div>
         </div>
       </div>
-    </section>
+    </div>
   );
 };
-// hover:-translate-y-2
-export default VodDesign1;
-
-// text colors i used for product title:
-// text-darkCrimsonTextColor
-// text-productTitle
 
-// text color i used for product excerpt:
-// text-productContent
-
-// text color i used for product cat:
-// text-darkCrimsonTextColor
-
-// bg color i used for play button icon:
-// bg-playButtonIcon
-// bg-playButtonIcon2
+export default VodDesign1;
 
 VodDesign1.defaultProps = {
   colors: [