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

@@ -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={`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",
-}
+};

src/components/ProductSalesAmount/Design2/index.js

@@ -1,6 +1,8 @@
 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);
@@ -11,57 +13,51 @@ const Design2 = ({title,incomes}) => {
     }, 100);
   }, []);
 
-  return <section className="my-20">
-  <div className="bg-white w-4/12 rounded shadow mx-auto py-7 px-4">
+  return (
+    <div className="bg-white 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>
+      <TitleSubtitle subTitle={false} />
       {/* circles */}
       {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"}}>
-          <div className={`h-3 rounded duration-500 `}
-            style={{background:income.bgColor, width: progressFlag ? income.width : 0,}}></div>
-        </div>
+          <AnimatedProgressBar />
           <p>{income.percentNumb}</p>
         </div>
       ))}
     </div>
-  </section>;
+  );
 };
 
 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",
     },
-  ]
-}
+  ],
+};