update src/components/AnimatedProgressBar/index.js, src/components/CardTrelloDesign/index.js and src/components/ProductSalesAmount/Design2/index.js

src/components/AnimatedProgressBar/index.js

@@ -12,7 +12,7 @@ const AnimatedProgressBar = ({ rangeWidth, parentBg, childBg }) => {
   return (
     <div className={`flex-row w-full rounded-full h-2 ${parentBg}`}>
       <div
-        className={`h-2 rounded-full dark:bg-gray-300 duration-500 ${childBg}`}
+        className={`h-full rounded-full dark:bg-gray-300 duration-500 ${childBg}`}
         style={{ width: progressBar ? rangeWidth : 0 }}
       ></div>
     </div>
@@ -26,3 +26,15 @@ AnimatedProgressBar.defaultProps = {
   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/CardTrelloDesign/index.js

@@ -114,8 +114,8 @@ const CardTrelloDesign = ({
       </div>
       {/* progressBar */}
       <AnimatedProgressBar
-        rangeWidth={"39%"}
+        rangeWidth={"10%"}
-        parentBg={"bg-[#E3E3E3]"}
+        parentBg={"bg-[#E3E3E3] ltr"}
         childBg={"bg-[#06BACE]"}
       />
     </div>

src/components/ProductSalesAmount/Design2/index.js

@@ -1,18 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import AnimatedProgressBar from "../../AnimatedProgressBar";
 import TitleSubtitle from "../../TitleSubtitle";
 
 import ellipse from "./Ellipse.svg";
 
-const Design2 = ({ title, incomes }) => {
+const Design2 = ({ incomes }) => {
-  const [progressFlag, setProgressFlag] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setProgressFlag(true);
-    }, 100);
-  }, []);
-
   return (
     <div className="bg-white rounded shadow mx-auto py-7 px-4">
       {/* title */}
@@ -32,8 +24,6 @@ const Design2 = ({ title, incomes }) => {
 export default Design2;
 
 Design2.defaultProps = {
-  title: "میزان فروش محصولات",
-
   incomes: [
     {
       image: ellipse,