-
{income.name}
-
{income.income}
-
-
{income.percent}
-
+
+
+
{income.name}
+
{income.income}
+
0 ? "bg-green-100" :"bg-red-100"}`}
+ >
+
0 ? 'text-green-500': 'text-red-500'}`}>
+ {income.percent}
+
+
+
+
{income.excerpt}
-
{income.excerpt}
+ {Number(index) !== incomes.length -1 && (
+
+ )}
))}
@@ -41,24 +49,23 @@ Design1.defaultProps = {
{
name: 'درآمد امروز',
income:'138.916.431',
- percent: '+12',
+ percent: 27,
logo: arrowUp,
excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
{
name: 'درآمد روز گذشته',
income:'651.098.311',
- percent: '-0.5',
- logo: arrowUp,
+ percent: -6,
+ logo: arrowDown,
excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
{
name: 'درآمد این هفته',
income:'890.325.308',
- percent: '+12',
+ percent: 10,
logo: arrowUp,
excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
-
]
}
\ No newline at end of file
diff --git a/src/components/ProductSalesAmount/Design2/Ellipse.svg b/src/components/ProductSalesAmount/Design2/Ellipse.svg
new file mode 100644
index 0000000..9268423
--- /dev/null
+++ b/src/components/ProductSalesAmount/Design2/Ellipse.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/ProductSalesAmount/Design2/index.js b/src/components/ProductSalesAmount/Design2/index.js
new file mode 100644
index 0000000..da5afd9
--- /dev/null
+++ b/src/components/ProductSalesAmount/Design2/index.js
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+
+import ellipse from './Ellipse.svg';
+
+const Design2 = ({title,incomes}) => {
+ const [progressFlag,setProgressFlag] = useState(false);
+
+ useEffect(() => {
+ setTimeout(() => {
+ setProgressFlag(true);
+ },100);
+ },[]);
+
+ return
+
+ {/* title */}
+
+ {/* circles */}
+ {incomes.map((income,index) =>(
+
+
+
+
{income.percentNumb}
+
+ ))}
+
+ ;
+};
+
+export default Design2;
+
+Design2.defaultProps = {
+ title: 'میزان فروش محصولات',
+
+ incomes: [
+ {
+ image: ellipse,
+ bgColor :'#26E58C',
+ width : '96%',
+ percentNumb : '110',
+ },
+ {
+ image: ellipse,
+ bgColor :'#FFEE00',
+ width : '44%',
+ percentNumb : '72',
+ },
+ {
+ image: ellipse,
+ bgColor :'#EC4C19',
+ width : '20%',
+ percentNumb : '20',
+ },
+ {
+ image: ellipse,
+ bgColor :'#0077FF',
+ width : '75%',
+ percentNumb : '80',
+ },
+ ]
+}
\ No newline at end of file