Creates some Table components

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",

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",

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">

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;

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;

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;

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;