product table added

src/App.js

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

src/components/Table/Design1/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16.494" height="16.494" viewBox="0 0 16.494 16.494">
+  <path id="Vector" d="M8.879,0H.741A.74.74,0,0,0,.219,1.265l3.56,3.56a1.464,1.464,0,0,0,2.069,0L7.2,3.471,9.408,1.265A.744.744,0,0,0,8.879,0Z" transform="translate(3.437 5.622)" fill="#d9d9d9"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H16.494V16.494H0Z" transform="translate(16.494 16.494) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/Table/Design1/arrow-up.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-up" xmlns="http://www.w3.org/2000/svg" width="16.494" height="16.494" viewBox="0 0 16.494 16.494">
+  <path id="Vector" d="M9.4,3.988,7.193,1.782,5.846.428a1.464,1.464,0,0,0-2.069,0L.218,3.988A.742.742,0,0,0,.74,5.252H8.877A.74.74,0,0,0,9.4,3.988Z" transform="translate(3.439 5.62)" fill="#65a9ff"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H16.494V16.494H0Z" transform="translate(16.494 16.494) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/Table/Design1/index.js

@@ -0,0 +1,145 @@
+import React from "react";
+
+import arrowDown from "./arrow-down.svg";
+import arrowUp from "./arrow-up.svg";
+
+const TableDesign1 = ({ tableItems, tableSubItems }) => {
+  return (
+    <section className="w-10/12 mx-auto my-10">
+      <div className="flex flex-col">
+        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+            <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  {tableItems.map((tableItem, index) => (
+                    <tr className="">
+                      <th
+                        scope="col"
+                        className="text-blue-400 font-light text-right text-sm p-4"
+                      >
+                        {tableItem.title}
+                      </th>
+                      <th
+                        scope=""
+                        className="text-blue-400 font-light text-right text-sm p-4 "
+                      >
+                        <div className="flex flex-row items-center">
+                          {tableItem.status}
+                          <div className="mr-3 flex flex-col">
+                            <img
+                              src={arrowUp}
+                              alt=""
+                              className="w-4 cursor-pointer"
+                            />
+                            <img
+                              src={arrowDown}
+                              alt=""
+                              className="w-4 cursor-pointer"
+                            />
+                          </div>
+                        </div>
+                      </th>
+                      <th
+                        scope="col"
+                        className="text-blue-400 font-light text-right text-sm p-4"
+                      >
+                        <div className="flex flex-row items-center">
+                          {tableItem.date}
+                          <div className="mr-3 flex flex-col">
+                            <img
+                              src={arrowUp}
+                              alt=""
+                              className="w-4 cursor-pointer"
+                            />
+                            <img
+                              src={arrowDown}
+                              alt=""
+                              className="w-4 cursor-pointer"
+                            />
+                          </div>
+                        </div>
+                      </th>
+                      <th
+                        scope="col"
+                        className="text-blue-400 font-light text-right text-sm p-4"
+                      >
+                        <div className="flex flex-row items-center">
+                          {tableItem.payedPrice}
+                          <div className="mr-3 flex flex-col">
+                            <img
+                              src={arrowUp}
+                              alt=""
+                              className="w-4 cursor-pointer"
+                            />
+                            <img
+                              src={arrowDown}
+                              alt=""
+                              className="w-4 cursor-pointer"
+                            />
+                          </div>
+                        </div>
+                      </th>
+                    </tr>
+                  ))}
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {tableSubItems.map((tableSubItem, i) => (
+                    <tr>
+                      <td className="p-4 whitespace-nowrap text-base font-light">
+                        {tableSubItem.title}
+                      </td>
+                      <td
+                        className={`p-4 whitespace-nowrap text-base font-light 
+                        ${
+                          tableSubItem.status
+                            ? "text-green-400"
+                            : "text-red-400"
+                        }`}
+                      >
+                        {tableSubItem.status ? "فعال" : "غیر فعال"}
+                      </td>
+                      <td className="p-4 whitespace-nowrap text-base font-light">
+                        {tableSubItem.date}
+                      </td>
+                      <td className="p-4 whitespace-nowrap text-base font-light">
+                        {tableSubItem.payedPrice} ریال
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TableDesign1;
+
+TableDesign1.defaultProps = {
+  tableItems: [
+    {
+      title: "عنوان",
+      status: "وضعیت",
+      date: "تاریخ",
+      payedPrice: "مبلغ پرداختی",
+    },
+  ],
+  tableSubItems: [
+    {
+      title: "مایکروویر سامسونگ مدل",
+      status: true,
+      date: "1400/09/21",
+      payedPrice: 2400000,
+    },
+    {
+      title: "آزمون آنلاین درس علوم تجربی",
+      status: false,
+      date: "1400/09/21",
+      payedPrice: 2400000,
+    },
+  ],
+};