From 50777f9f3096eca2515deefc454cafee833085df Mon Sep 17 00:00:00 2001
From: Vazhin Tayeb <vazhintayeb@gmail.com>
Date: Fri, 15 Jan 2021 08:48:23 +0300
Subject: [PATCH] Creates some Table components

---
 React/package-lock.json                       |  5 +++
 React/package.json                            |  1 +
 React/src/pages/components/VehiclesMain.js    |  7 +++-
 .../src/pages/components/table/ColumnName.js  | 12 ++++++
 React/src/pages/components/table/EditBtns.js  | 15 ++++++++
 React/src/pages/components/table/Table.js     | 37 +++++++++++++++++++
 React/src/pages/components/table/TableData.js |  9 +++++
 7 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 React/src/pages/components/table/ColumnName.js
 create mode 100644 React/src/pages/components/table/EditBtns.js
 create mode 100644 React/src/pages/components/table/Table.js
 create mode 100644 React/src/pages/components/table/TableData.js

diff --git a/React/package-lock.json b/React/package-lock.json
index 05a4516..455fba5 100644
--- a/React/package-lock.json
+++ b/React/package-lock.json
@@ -10628,6 +10628,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.2.tgz",
       "integrity": "sha512-DHRuRk3K4Lg9obI6J4Y+nKvtwjasYRU9CFL3ud42x9YJG1HbQjSNublapC/WBJOA726gNUbqbj0U2df9+uzspQ=="
     },
+    "react-icons": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
+      "integrity": "sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg=="
+    },
     "react-is": {
       "version": "16.9.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
diff --git a/React/package.json b/React/package.json
index 3a7f338..43f037e 100644
--- a/React/package.json
+++ b/React/package.json
@@ -8,6 +8,7 @@
     "oidc-client": "^1.9.1",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
+    "react-icons": "^4.1.0",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.0",
     "react-scripts": "3.1.2",
diff --git a/React/src/pages/components/VehiclesMain.js b/React/src/pages/components/VehiclesMain.js
index 4647b02..8f89fa5 100644
--- a/React/src/pages/components/VehiclesMain.js
+++ b/React/src/pages/components/VehiclesMain.js
@@ -4,6 +4,7 @@ import * as apiService from "../../services/apiService";
 import { prettifyJson } from "../../utils/jsonUtils";
 import Heading1 from "./Heading1";
 import Button from "./Button";
+import Table from "./table/Table";
 
 const VehiclesMain = () => {
   const user = useSelector((state) => state.auth.user);
@@ -110,13 +111,15 @@ const VehiclesMain = () => {
             Your Vehicles:
           </h3>
 
-          <ul>
+          <Table />
+
+          {/* <ul>
             {vehicleData.map((v) => (
               <li key={v.id}>
                 {v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}
               </li>
             ))}
-          </ul>
+          </ul> */}
         </>
       ) : (
         <h3 className="font-light font-inter text-black-custom my-32 self-center">
diff --git a/React/src/pages/components/table/ColumnName.js b/React/src/pages/components/table/ColumnName.js
new file mode 100644
index 0000000..653a2f3
--- /dev/null
+++ b/React/src/pages/components/table/ColumnName.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const ColumnName = ({ text }) => (
+  <th
+    scope="col"
+    className="px-16 py-4 whitespace-nowrap text-2xl font-inter text-black-custom font-semibold"
+  >
+    {text}
+  </th>
+);
+
+export default ColumnName;
diff --git a/React/src/pages/components/table/EditBtns.js b/React/src/pages/components/table/EditBtns.js
new file mode 100644
index 0000000..f8e71a6
--- /dev/null
+++ b/React/src/pages/components/table/EditBtns.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { FiSettings, FiTrash } from "react-icons/fi";
+import { BsThreeDots } from "react-icons/bs";
+
+const EditBtns = () => {
+  return (
+    <div className="flex">
+      <FiTrash className="mx-3" />
+      <FiSettings className="mx-3" />
+      <BsThreeDots className="mx-3 text-3xl" />
+    </div>
+  );
+};
+
+export default EditBtns;
diff --git a/React/src/pages/components/table/Table.js b/React/src/pages/components/table/Table.js
new file mode 100644
index 0000000..779da32
--- /dev/null
+++ b/React/src/pages/components/table/Table.js
@@ -0,0 +1,37 @@
+import React from "react";
+import ColumnName from "./ColumnName";
+import EditBtns from "./EditBtns";
+import TableData from "./TableData";
+
+const Table = () => {
+  return (
+    <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <ColumnName text={"Name"} />
+            <ColumnName text={"Title"} />
+            <ColumnName text={"Status"} />
+            <ColumnName text={"Role"} />
+            <th scope="col" className="relative px-6 py-3">
+              <span className="sr-only">Actions</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          <tr>
+            <TableData text={"Jane Cooper"} />
+            <TableData text={"Regional Paradigm Technician"} />
+            <TableData text={"Active"} />
+            <TableData text={"Admin"} />
+            <TableData Component={EditBtns} />
+          </tr>
+
+          {/* <!-- More items... --> */}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;
diff --git a/React/src/pages/components/table/TableData.js b/React/src/pages/components/table/TableData.js
new file mode 100644
index 0000000..9456f7e
--- /dev/null
+++ b/React/src/pages/components/table/TableData.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const TableData = ({ text, Component }) => (
+  <td className="px-16 py-4 whitespace-nowrap text-2xl font-inter text-black-custom font-normal">
+    {text ? text : <Component />}
+  </td>
+);
+
+export default TableData;