update 5 files

src/App.js

@@ -161,7 +161,7 @@ function App() {
 
         {/* <CourseChapter /> */}
 
-        <Design1 />
+        {/* <Design1 /> */}
         <Design2 />
 
         {/* <SidebarMenu /> */}
@@ -214,9 +214,9 @@ function App() {
         {/* <PopupCard /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
-        {/* <CircleInCircle />
+        {/* <CircleInCircle /> */}
-        <TimeLine />
+        {/* <TimeLine /> */}
-        <SelectYear /> */}
+        {/* <SelectYear /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
         {/* <TimeLineComponent /> */}
@@ -265,7 +265,7 @@ function App() {
         {/* <DateRangePicker /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <FormInput />
+        {/* <FormInput /> */}
 
         {/* <LeafletMap /> */}
 

src/components/AnimatedProgressBar/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-const AnimatedProgressBar = ({rangeWidth, parentBg, childBg}) => {
+const AnimatedProgressBar = ({ rangeWidth, parentBg, childBg }) => {
   const [progressBar, setProgressBar] = useState(false);
 
   useEffect(() => {
@@ -10,15 +10,19 @@ const AnimatedProgressBar = ({rangeWidth, parentBg, childBg}) => {
   }, []);
 
   return (
-<div className={`flex-row w-full  rounded-full h-2 mt-4 ${parentBg}`} style={{direction: "ltr"}}>
+    <div className={`flex-row w-full rounded-full h-2 ${parentBg}`}>
-  <div className={`h-2 rounded-full dark:bg-gray-300 duration-500 ${childBg}`} style={{ width: progressBar ? rangeWidth : 0}}></div>
+      <div
-</div>  )
+        className={`h-2 rounded-full dark:bg-gray-300 duration-500 ${childBg}`}
-}
+        style={{ width: progressBar ? rangeWidth : 0 }}
+      ></div>
+    </div>
+  );
+};
 
-export default AnimatedProgressBar
+export default AnimatedProgressBar;
 
 AnimatedProgressBar.defaultProps = {
   rangeWidth: "75%",
   parentBg: "bg-gray-200",
   childBg: "bg-gray-600",
-}
+};

src/components/ProductSalesAmount/Design2/index.js

@@ -1,67 +1,63 @@
 import React, { useEffect, useState } from "react";
+import AnimatedProgressBar from "../../AnimatedProgressBar";
+import TitleSubtitle from "../../TitleSubtitle";
 
-import ellipse from './Ellipse.svg';
+import ellipse from "./Ellipse.svg";
 
-const Design2 = ({title,incomes}) => {
+const Design2 = ({ title, incomes }) => {
-  const [progressFlag,setProgressFlag] = useState(false);
+  const [progressFlag, setProgressFlag] = useState(false);
 
   useEffect(() => {
     setTimeout(() => {
       setProgressFlag(true);
-    },100);
+    }, 100);
-  },[]);
+  }, []);
 
-  return <section className="my-20">
+  return (
-  <div className="bg-white w-4/12 rounded shadow mx-auto py-7 px-4">
+    <div className="bg-white rounded shadow mx-auto py-7 px-4">
       {/* title */}
-    <div className="flex flex-row items-center mb-7">
+      <TitleSubtitle subTitle={false} />
-      <div className="w-1 h-5 bg-blue-600 rounded ml-1"></div>
-      <h2 className="text-base">{title}</h2>
-    </div>
       {/* circles */}
-    {incomes.map((income,index) =>(
+      {incomes.map((income, index) => (
-      <div className="flex flex-row items-center mt-4">
+        <div key={index} className="flex flex-row items-center mt-4">
           <img src={income.image} alt="" className="w-14 rounded-full" />
-        <div className="h-3 w-full rounded mt-2 mr-2 ml-4" style={{background:"#EDF2FB"}}>
+          <AnimatedProgressBar />
-          <div className={`h-3 rounded duration-500 `}
-            style={{background:income.bgColor, width: progressFlag ? income.width : 0,}}></div>
-        </div>
           <p>{income.percentNumb}</p>
         </div>
       ))}
     </div>
-  </section>;
+  );
 };
 
 export default Design2;
 
 Design2.defaultProps = {
-  title: 'میزان فروش محصولات',
+  title: "میزان فروش محصولات",
 
   incomes: [
     {
       image: ellipse,
-      bgColor :'#26E58C',
+      bgColor: "#26E58C",
-      width : '96%', 
+      width: "96%",
-      percentNumb : '110',
+      percentNumb: "110",
     },
     {
       image: ellipse,
-      bgColor :'#FFEE00',
+      bgColor: "#FFEE00",
-      width : '44%', 
+      width: "44%",
-      percentNumb : '72',
+      percentNumb: "72",
     },
     {
       image: ellipse,
-      bgColor :'#EC4C19',
+      bgColor: "#EC4C19",
-      width : '20%', 
+      width: "20%",
-      percentNumb : '20',
+      percentNumb: "20",
     },
     {
       image: ellipse,
-      bgColor :'#0077FF',
+      bgColor: "#0077FF",
-      width : '75%', 
+      width: "75%",
-      percentNumb : '80',
+      percentNumb: "80",
     },
-  ]
+  ],
-}
+};