update src/components/ProductSalesAmount/Design1/index.js

src/components/ProductSalesAmount/Design1/index.js

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