Renders vehicleData into the Table

React/src/pages/components/Button.js

@@ -1,9 +1,9 @@
 import React from "react";
 
-const Button = ({ onClickEvent, text }) => (
+const Button = ({ onClickEvent, text, classes = "" }) => (
   <button
     onClick={onClickEvent}
-    className="bg-blue-custom border-0 font-inter font-semibold rounded text-xl m-0"
+    className={`bg-blue-custom border-0 font-inter font-semibold rounded text-xl m-0 ${classes}`}
   >
     {text}
   </button>

React/src/pages/components/VehiclesMain.js

@@ -46,35 +46,6 @@ const VehiclesMain = () => {
       licensePlate: "9956443",
       type: 1,
     },
-
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "White",
-      model: "Toyota Camry",
-      licensePlate: "9956443",
-      type: 1,
-    },
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "White",
-      model: "Toyota Camry",
-      licensePlate: "9956443",
-      type: 1,
-    },
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "White",
-      model: "Toyota Camry",
-      licensePlate: "9956443",
-      type: 1,
-    },
-    {
-      id: Math.floor(Math.random() * 200) + 1,
-      color: "White",
-      model: "Toyota Camry",
-      licensePlate: "9956443",
-      type: 1,
-    },
   ]);
 
   useEffect(() => {
@@ -87,22 +58,14 @@ const VehiclesMain = () => {
     setVehicleData(vehicles);
   }
 
-  function getType(type) {
-    switch (type) {
-      case 1:
-        return "Sedan";
-      case 2:
-        return "SUV";
-      case 3:
-        return "Pickup";
-    }
-  }
-
   return (
     <div className="flex flex-col">
       <Heading1
         text={"Traffic Police Service"}
-        styles={{ marginBottom: "0", marginTop: "20%" }}
+        styles={{
+          marginBottom: "0",
+          ...(!vehicleData && { marginTop: "10%" }),
+        }}
       />
       {/* <p>Hello, {user.profile.given_name}.</p> */}
       {vehicleData ? (
@@ -111,7 +74,7 @@ const VehiclesMain = () => {
             Your Vehicles:
           </h3>
 
-          <Table />
+          <Table vehicleData={vehicleData} />
 
           {/* <ul>
             {vehicleData.map((v) => (
@@ -126,7 +89,10 @@ const VehiclesMain = () => {
           No vehicles yet.
         </h3>
       )}
-      <Button text={"Register A Vehicle"} />
+      <Button
+        text="Register A Vehicle"
+        classes={vehicleData && "self-start mt-20"}
+      />
     </div>
   );
 };

React/src/pages/components/table/Table.js

@@ -3,29 +3,42 @@ import ColumnName from "./ColumnName";
 import EditBtns from "./EditBtns";
 import TableData from "./TableData";
 
-const Table = () => {
+const Table = ({ vehicleData }) => {
+  function getType(type) {
+    switch (type) {
+      case 1:
+        return "Sedan";
+      case 2:
+        return "SUV";
+      case 3:
+        return "Pickup";
+    }
+  }
+
   return (
     <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded">
-      <table className="min-w-full divide-y divide-gray-200">
+      <table className="min-w-full divide-y divide-gray-200 mb-0">
         <thead className="bg-gray-50">
           <tr>
-            <ColumnName text={"Name"} />
-            <ColumnName text={"Title"} />
-            <ColumnName text={"Status"} />
-            <ColumnName text={"Role"} />
+            <ColumnName text={"Model"} />
+            <ColumnName text={"License Plate"} />
+            <ColumnName text={"Color"} />
+            <ColumnName text={"Type"} />
             <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>
+          {vehicleData.map((vehicle) => (
+            <tr key={vehicle.id}>
+              <TableData text={vehicle.model} />
+              <TableData text={vehicle.licensePlate} />
+              <TableData text={vehicle.color} />
+              <TableData text={getType(vehicle.type)} />
+              <TableData Component={EditBtns} />
+            </tr>
+          ))}
 
           {/* <!-- More items... --> */}
         </tbody>