sales income component added

src/App.js

@@ -41,6 +41,7 @@ import SimpleBarChart from "./components/Chart/SimpleBarChart";
 import Switch from "./components/Switch";
 import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart";
 import Design1 from "./components/ProductSalesAmount/Design1";
+import Design2 from "./components/ProductSalesAmount/Design2";
 
 function App() {
   return (
@@ -79,9 +80,10 @@ function App() {
         {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
         {/* <SidebarDesign2 /> */}
-        {/* <SimpleBarChart /> */}
+        <SimpleBarChart />
         {/* <SpecifiedDomainRadarChart/> */}
-        <Design1/>
+        {/* <Design1/> */}
+        <Design2/>
       </div>
     </Provider>
   );

src/App.scss

@@ -0,0 +1,3 @@
+* {
+  direction: rtl;
+}

src/components/ProductSalesAmount/Design1/index.js

@@ -5,25 +5,33 @@ import arrowUp from './home-trend-up.svg';
 
 const Design1 = ({title,price,incomes}) => {
   return <section className="my-20">
-    <div className="bg-white w-5/12 rounded shadow mx-auto py-7 px-4">
+    <div className="bg-white w-6/12 rounded shadow mx-auto py-7 px-4">
       {/* title */}
       <div className="flex flex-row items-center">
         <div className="w-1 h-5 bg-blue-600 rounded ml-1"></div>
         <h2 className="text-lg">{title}</h2>
       </div>
       {/* price */}
-      <p className="text-base mt-4 mr-3" style={{color:"#65A9FF"}}>{price}<span className="mr-1">تومان</span></p>
+      <p className="text-base mt-4 mr-2" style={{color:"#65A9FF"}}>{price}<span className="mr-1">تومان</span></p>
       {/* card */}
-      <div className="flex flex-row items-center mt-4">
+      <div className="flex flex-row flex-wrap items-center">
       {incomes.map((income,index) => (
-        <div className="flex flex-col p-4 border-l border-gray-200">
+        <div style={{width:'33%'}} className="flex flex-row my-2">
+          <div className="flex flex-col border-gray-200 p-3" >
             <p className="text-base">{income.name}</p>
             <p className="text-lg font-bold text-center my-2">{income.income}</p>
-          <div className="bg-green-100 my-2 p-1 flex flex-row items-center justify-around self-end rounded w-16">
-            <span className="font-bold text-sm text-green-500">{income.percent}</span>
+            <div className={`w-16 my-2 p-1 flex flex-row items-center justify-around self-end rounded ${income.percent > 0 ? "bg-green-100" :"bg-red-100"}`}
+            >
+            <span style={{direction: 'initial'}} className={`font-bold text-sm ${income.percent > 0 ? 'text-green-500': 'text-red-500'}`}>
+                {income.percent}
+            </span>
               <img src={income.logo} alt="" />
             </div>
-          <p className="text-xs leading-6 text-justify mt-2">{income.excerpt}</p>
+            <p className="text-xs leading-5 text-justify mt-2">{income.excerpt}</p>
+          </div>
+          {Number(index) !== incomes.length -1 && (
+          <div className="bg-gray-200 w-1"></div>
+          )}
         </div>
       ))}
       </div>
@@ -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: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
     },
-
   ]
 }

src/components/ProductSalesAmount/Design2/Ellipse.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <circle id="Ellipse_116" data-name="Ellipse 116" cx="20" cy="20" r="20" fill="#edf2fb"/>
+</svg>

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 <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>
+        </div>
+        <p>{income.percentNumb}</p>
+      </div>
+    ))}
+  </div>
+  </section>;
+};
+
+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',
+    },
+  ]
+}