update src/components/ProductSalesAmount/Design2/index.js

src/components/ProductSalesAmount/Design2/index.js

@@ -13,11 +13,7 @@ const Design2 = ({ incomes }) => {
       {incomes.map((income, index) => (
         <div key={index} className="flex flex-row items-center mt-4">
           <img src={income.image} alt="" className="w-14 rounded-full" />
-          <AnimatedProgressBar
+          {income.progressBar}
-            rangeWidth={"10%"}
-            parentBg={"bg-[#E3E3E3] mx-2"}
-            childBg={"bg-[#06BACE]"}
-          />
           <p>{income.percentNumb}</p>
         </div>
       ))}
@@ -34,24 +30,52 @@ Design2.defaultProps = {
       bgColor: "#26E58C",
       width: "96%",
       percentNumb: "110",
+      progressBar: (
+        <AnimatedProgressBar
+          rangeWidth={"10%"}
+          parentBg={"bg-[#E3E3E3] mx-2"}
+          childBg={"bg-[#06BACE]"}
+        />
+      ),
     },
     {
       image: ellipse,
       bgColor: "#FFEE00",
       width: "44%",
       percentNumb: "72",
+      progressBar: (
+        <AnimatedProgressBar
+          rangeWidth={"26%"}
+          parentBg={"bg-[#E3E3E3] mx-2"}
+          childBg={"bg-[#06BACE]"}
+        />
+      ),
     },
     {
       image: ellipse,
       bgColor: "#EC4C19",
-      width: "20%",
+      width: "2%",
       percentNumb: "20",
+      progressBar: (
+        <AnimatedProgressBar
+          rangeWidth={"90%"}
+          parentBg={"bg-[#E3E3E3] mx-2"}
+          childBg={"bg-[#06BACE]"}
+        />
+      ),
     },
     {
       image: ellipse,
       bgColor: "#0077FF",
-      width: "75%",
+      width: "33%",
       percentNumb: "80",
+      progressBar: (
+        <AnimatedProgressBar
+          rangeWidth={"99%"}
+          parentBg={"bg-[#E3E3E3] mx-2"}
+          childBg={"bg-[#06BACE]"}
+        />
+      ),
     },
   ],
 };