update 5 files

src/components/CardTrelloDesign/index.js

@@ -2,12 +2,12 @@ import React from "react";
 import Button from "../ButtonDesign/Button";
 import CircleInCircle from "../CircleInCircle";
 import TagDesign1 from "../Tag/TagDesign1";
+import AnimatedProgressBar1 from "../ProgressBar/AnimatedProgressbar1";
 
 import clock from "./images/clock.svg";
 import nike from "./images/nike.svg";
 import messageText from "./images/message-text.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
-import AnimatedProgressBar from "../AnimatedProgressBar";
 
 import RelativeCircle from "../MiniComponents/RelativeCircle";
 import CommentIcon from "../MiniComponents/CommentIcon";
@@ -95,7 +95,7 @@ const CardTrelloDesign = ({
         </div>
       </div>
       {/* progressBar */}
-      <AnimatedProgressBar
+      <AnimatedProgressBar1
         rangeWidth={"10%"}
         parentBg={"bg-[#E3E3E3] ltr mt-3"}
         childBg={"bg-[#06BACE]"}

src/components/ProgressBar/AnimatedProgressbar1/index.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+
+const AnimatedProgressbar1 = ({ rangeWidth, parentBg, childBg }) => {
+  const [progressBar, setProgressBar] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setProgressBar(true);
+    }, 1000);
+  }, []);
+
+  return (
+    <div className={`flex-row w-full rounded-full h-2 ${parentBg}`}>
+      <div
+        className={`h-full rounded-full dark:bg-gray-300 duration-500 ${childBg}`}
+        style={{ width: progressBar ? rangeWidth : 0 }}
+      ></div>
+    </div>
+  );
+};
+
+export default AnimatedProgressbar1;
+
+AnimatedProgressbar1.defaultProps = {
+  rangeWidth: "75%",
+  parentBg: "bg-gray-200",
+  childBg: "bg-gray-600",
+};
+
+// const [rangePercent, setRangePercent] = useState(55);
+
+// w-[${
+//   rangePercent + "%"
+// }]
+
+// className={
+//   "h-full bg-gray-300 " +
+//   `${rangePercent ? "w-[" + rangePercent + "%]" : ""}`
+// }
+// className={'h-full bg-gray-300"+ `${rangePercent ? 'w-[' + rangePercent + '%]' : ''}`}

src/components/ProgressBar/index.js

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 
 import CircularProgressbar from "./CircularProgressbar";
+import AnimatedProgressbar1 from "./AnimatedProgressbar1";
 
 function ProgressBar() {
   const list = {
     1: <CircularProgressbar />,
+    2: <AnimatedProgressbar1 />,
   };
   const [type, setType] = useState(1);
   return (

src/components/SingleProduct/ProductDesign1/index.js

@@ -1,32 +1,42 @@
 import React, { useState } from "react";
+
 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";
 
 const Design1 = ({
   productHolderClassname,
+
   discountPricePercent,
   likeBtn,
   discount,
 
-  colors,
+  verticalImg,
-  discountPrice,
+  horizontalImg,
+
+  tooltip,
+
+  productTitle,
+  productTitleClass,
+
   productContent,
+  productContentClass,
+
+  productCat,
+
   star,
-  productTags,
+
+  discountPrice,
+  price,
+  progressBar,
+
   priceDirection,
-  productTitleAlignment,
+
+  productTags,
   priceHolder,
-  productTitleColor,
-  productExcerptTextColor,
-  productCat,
-  productCatTextColor,
-  rangeHolder,
-  verticalImg,
-  horizontalImg,
-  rangeWidth,
   addToCartHolder,
 }) => {
   return (
@@ -79,91 +89,108 @@ const Design1 = ({
           )}
         </div>
         {/* select Color */}
-        {colors && (
+        {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>
       {/* product content */}
-      <div className="px-2">
+      <div className="p-2 my-4">
-        <div className="mt-4">
+        {/* productTitle */}
-          <h2
+        <h2 className={`${productTitleClass}`}>{productTitle}</h2>{" "}
-            className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
+        {/* productContent */}
-          >
+        {productContent && (
-            نسخه چاپی علموم تجربه هفتم
+          <p className={`${productContentClass}`}>{productContent}</p>
-          </h2>
+        )}
-          {productContent && (
+        {/* productCat */}
-            <p
+        {productCat && (
-              className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
+          <TagDesign1
-            >
+            tagClassName={"mt-2 text-xs text-[#246E8A] font-sansbold"}
-              این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
+            icon={false}
-              دیگری نیز دارد.
+            title={"پایه سوم"}
-            </p>
+          />
-          )}
+        )}
-          {productCat && (
-            <span className={`text-xs font-light ${productCatTextColor}`}>
-              پایه سوم
-            </span>
-          )}
-        </div>
         {/* star */}
         {star && (
           <div className="flex items-center mt-2">
             <StarRating />
-            <span className="text-xs text-productContent font-bold mr-2">
+            <span className="text-[#707070] text-sm font-sansbold mr-2">
               39
             </span>
           </div>
         )}
-        {/* price */}
+        {/* price / add to cart */}
         {priceHolder && (
           <div
             className={`flex items-center justify-between ${priceDirection}`}
           >
+            {/* discounted price / price */}
             <div className="mt-2">
+              {/* discounted price */}
               <div
                 className={`${
                   priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
                 }`}
               >
-                <span className="text-xs text-borderColor ml-2">قیمت</span>
+                <span className="text-xs text-[#707070] ml-2">قیمت</span>
                 {/* price with line on it */}
                 {discountPrice && (
-                  <p className="line-through text-xs text-borderColor mr-2">
+                  <p className="line-through text-xs text-[#707070] mr-0.5">
-                    145<span>تومان</span>
+                    {discountPrice}
+                    <span>تومان</span>
                   </p>
                 )}
               </div>
-              <p className="text-sm text-productPrice font-semibold inline">
+              {/* price */}
-                145.000<span>تومان</span>
+              <p className="text-sm text-[#132f52] font-sansbold inline">
+                {price}
+                <span>تومان</span>
               </p>
             </div>
             {/* add to cart */}
             {addToCartHolder && (
-              <button
+              <Button
-                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 ${
+                text={addToCartHolder}
+                className={`mt-2 p-2 text-xs text-[#132F52] hover:text-white hover:bg-[#132F52] border border-[#132F52] transition duration-500 rounded-2xl ${
                   priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                 }`}
-              >
+              />
-                اضافه کردن به سبد خرید
-              </button>
             )}
           </div>
         )}
         {productTags && (
-          <div className="mt-2 flex flex-wrap gap-2">
+          <div className="mt-4 flex flex-wrap gap-2">
             {productTags.map((item, index) => (
               <TagDesign1 icon={false} title={item} key={index} />
             ))}
           </div>
         )}
-        {rangeHolder && (
+        {progressBar && (
-          <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
+          <AnimatedProgressbar1
-            <div
+            rangeWidth={"75%"}
-              className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
+            parentBg={"bg-[#D3E9FF] rtl mt-5"}
-            ></div>
+            childBg={"bg-[#68A8E6]"}
-          </div>
+          />
         )}
       </div>
     </div>
@@ -185,30 +212,29 @@ Design1.defaultProps = {
   horizontalImg: false,
   // "images/SingleProductwatermelon.png"
 
-  // icons on product image
+  tooltip: true,
-  colors: true,
+
-  // product price
+  productTitle: "نسخه چاپی علموم تجربه هفتم",
-  discountPrice: true,
+  productTitleClass: "text-sm text-justify text-[#246E8A]",
-  priceHolder: true,
+
+  productContent: `این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب دیگری نیز دارد.`,
+  productContentClass: "mt-2 text-[#707070] text-justify text-xs leading-6",
 
-  productContent: true,
-  star: true,
-  productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
   productCat: true,
-  rangeHolder: true,
 
-  addToCartHolder: true,
+  star: true,
+
+  discountPrice: "145",
+  price: "145.000",
 
-  productTitleColor: "text-productTitle",
+  addToCartHolder: "اضافه کردن به سبد خرید",
 
-  productExcerptTextColor: "text-productContent",
+  progressBar: true,
 
-  productCatTextColor: "text-darkCrimsonTextColor",
+  priceHolder: true,
-  // برای درصد دادن به عرض رنج
+
-  rangeWidth: "w-44",
+  productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
-  //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
 
-  productTitleAlignment: "text-justify",
   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
   priceDirection: "flex-row",
 };

src/components/Tooltip/Tooltip1/index.js

@@ -28,6 +28,7 @@ export default Tooptip1;
 Tooptip1.defaultProps = {
   tooltipPosition: "top",
   tooltipBgColor: "dark",
+
   items: [
     {
       image: "images/SingleProductyellowDotIcon.svg",