From c3ec6d7ff923b18906abc1bb22d560f94b653ec5 Mon Sep 17 00:00:00 2001 From: mahdi Date: Tue, 3 May 2022 16:31:11 +0430 Subject: [PATCH] update 5 files --- src/App.js | 10 +-- src/components/AnimatedProgressBar/index.js | 38 +++++----- .../ProductSalesAmount/Design2/index.js | 74 +++++++++---------- 3 files changed, 61 insertions(+), 61 deletions(-) diff --git a/src/App.js b/src/App.js index 37fc137..3f20371 100644 --- a/src/App.js +++ b/src/App.js @@ -161,7 +161,7 @@ function App() { {/* */} - + {/* */} {/* */} @@ -214,9 +214,9 @@ function App() { {/* */} {/* ----------------------------$$$ start---------------------------- */} - {/* - - */} + {/* */} + {/* */} + {/* */} {/* ----------------------------$$$ end---------------------------- */} {/* */} @@ -265,7 +265,7 @@ function App() { {/* */} {/* ----------------------------$$$ end---------------------------- */} - + {/* */} {/* */} diff --git a/src/components/AnimatedProgressBar/index.js b/src/components/AnimatedProgressBar/index.js index e56c6b8..23bceab 100644 --- a/src/components/AnimatedProgressBar/index.js +++ b/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 ( -
-
-
) -} +
+
+
+ ); +}; -export default AnimatedProgressBar +export default AnimatedProgressBar; AnimatedProgressBar.defaultProps = { - rangeWidth: "75%", - parentBg: "bg-gray-200", - childBg: "bg-gray-600", -} \ No newline at end of file + rangeWidth: "75%", + parentBg: "bg-gray-200", + childBg: "bg-gray-600", +}; diff --git a/src/components/ProductSalesAmount/Design2/index.js b/src/components/ProductSalesAmount/Design2/index.js index da5afd9..1a9e86f 100644 --- a/src/components/ProductSalesAmount/Design2/index.js +++ b/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
-
- {/* title */} -
-
-

{title}

-
- {/* circles */} - {incomes.map((income,index) =>( -
- -
-
+ return ( +
+ {/* title */} + + {/* circles */} + {incomes.map((income, index) => ( +
+ + +

{income.percentNumb}

-

{income.percentNumb}

-
- ))} -
-
; + ))} + + ); }; 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", }, - ] -} \ No newline at end of file + ], +};