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 />
-        <TimeLine />
-        <SelectYear /> */}
+        {/* <CircleInCircle /> */}
+        {/* <TimeLine /> */}
+        {/* <SelectYear /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
         {/* <TimeLineComponent /> */}
@@ -265,7 +265,7 @@ function App() {
         {/* <DateRangePicker /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <FormInput />
+        {/* <FormInput /> */}
 
         {/* <LeafletMap /> */}
 

src/components/AnimatedProgressBar/index.js

@@ -1,24 +1,28 @@
 import React, { useEffect, useState } from "react";
 
-const AnimatedProgressBar = ({rangeWidth, parentBg, childBg}) => {
-    const [progressBar, setProgressBar] = useState(false);
+const AnimatedProgressBar = ({ rangeWidth, parentBg, childBg }) => {
+  const [progressBar, setProgressBar] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setProgressBar(true);
+    }, 1000);
+  }, []);
 
-    useEffect(() => {
-      setTimeout(() => {
-        setProgressBar(true);
-      }, 1000);
-    }, []);
-  
   return (
-<div className={`flex-row w-full  rounded-full h-2 mt-4 ${parentBg}`} style={{direction: "ltr"}}>
-  <div className={`h-2 rounded-full dark:bg-gray-300 duration-500 ${childBg}`} style={{ width: progressBar ? rangeWidth : 0}}></div>
-</div>  )
-}
+    <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>
+  );
+};
 
-export default AnimatedProgressBar
+export default AnimatedProgressBar;
 
 AnimatedProgressBar.defaultProps = {
-    rangeWidth: "75%",
-    parentBg: "bg-gray-200",
-    childBg: "bg-gray-600",
-}
+  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 [progressFlag,setProgressFlag] = useState(false);
+const Design2 = ({ title, incomes }) => {
+  const [progressFlag, setProgressFlag] = useState(false);
 
   useEffect(() => {
     setTimeout(() => {
       setProgressFlag(true);
-    },100);
-  },[]);
+    }, 100);
+  }, []);
 
-  return <section className="my-20">
-  <div className="bg-white w-4/12 rounded shadow mx-auto py-7 px-4">
-    {/* title */}
-    <div className="flex flex-row items-center mb-7">
-      <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) =>(
-      <div 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"}}>
-          <div className={`h-3 rounded duration-500 `}
-            style={{background:income.bgColor, width: progressFlag ? income.width : 0,}}></div>
+  return (
+    <div className="bg-white rounded shadow mx-auto py-7 px-4">
+      {/* title */}
+      <TitleSubtitle subTitle={false} />
+      {/* circles */}
+      {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 />
+          <p>{income.percentNumb}</p>
         </div>
-        <p>{income.percentNumb}</p>
-      </div>
-    ))}
-  </div>
-  </section>;
+      ))}
+    </div>
+  );
 };
 
 export default Design2;
 
 Design2.defaultProps = {
-  title: 'میزان فروش محصولات',
+  title: "میزان فروش محصولات",
 
   incomes: [
     {
       image: ellipse,
-      bgColor :'#26E58C',
-      width : '96%', 
-      percentNumb : '110',
+      bgColor: "#26E58C",
+      width: "96%",
+      percentNumb: "110",
     },
     {
       image: ellipse,
-      bgColor :'#FFEE00',
-      width : '44%', 
-      percentNumb : '72',
+      bgColor: "#FFEE00",
+      width: "44%",
+      percentNumb: "72",
     },
     {
       image: ellipse,
-      bgColor :'#EC4C19',
-      width : '20%', 
-      percentNumb : '20',
+      bgColor: "#EC4C19",
+      width: "20%",
+      percentNumb: "20",
     },
     {
       image: ellipse,
-      bgColor :'#0077FF',
-      width : '75%', 
-      percentNumb : '80',
+      bgColor: "#0077FF",
+      width: "75%",
+      percentNumb: "80",
     },
-  ]
-}
+  ],
+};