update

src/App.js

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

src/components/ProductSalesAmount/Design1/home-trend-down.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.821" height="8.621" viewBox="0 0 13.821 8.621">
+  <g id="vuesax_linear_home-trend-down" data-name="vuesax/linear/home-trend-down" transform="translate(1.061 1.061)">
+    <g id="home-trend-down">
+      <path id="Vector" d="M11.7,6.5,6.24,1.04,4.16,4.16,0,0" fill="none" stroke="#cf3912" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,2.6H2.6V0" transform="translate(9.1 3.9)" fill="none" stroke="#cf3912" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </g>
+  </g>
+</svg>

src/components/ProductSalesAmount/Design1/home-trend-up.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.758" height="8.586" viewBox="0 0 13.758 8.586">
+  <g id="home-trend-up" transform="translate(1.061 1.061)">
+    <path id="Vector" d="M11.637,0,6.206,5.43l-2.069-3.1L0,6.465" fill="none" stroke="#15bf4e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H2.586V2.586" transform="translate(9.051)" fill="none" stroke="#15bf4e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

src/components/ProductSalesAmount/Design1/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import arrowDown from './home-trend-down.svg';
+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">
+      {/* 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>
+      {/* card */}
+      <div className="flex flex-row items-center mt-4">
+      {incomes.map((income,index) => (
+        <div className="flex flex-col p-4 border-l border-gray-200">
+          <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>
+            <img src={income.logo} alt="" />
+          </div>
+          <p className="text-xs leading-6 text-justify mt-2">{income.excerpt}</p>
+        </div>
+      ))}
+      </div>
+    </div>
+  </section>;
+};
+
+export default Design1;
+
+Design1.defaultProps = {
+  title: 'میزان فروش محصولات',
+  price: '196.209.810',
+
+  incomes: [
+    {
+      name: 'درآمد امروز',
+      income:'138.916.431',
+      percent: '+12',
+      logo: arrowUp,
+      excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
+    },
+    {
+      name: 'درآمد روز گذشته',
+      income:'651.098.311',
+      percent: '-0.5',
+      logo: arrowUp,
+      excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
+    },
+    {
+      name: 'درآمد این هفته',
+      income:'890.325.308',
+      percent: '+12',
+      logo: arrowUp,
+      excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
+    },
+
+  ]
+}