Abstracts away the input texts

React/src/pages/components/Card.js

@@ -1,8 +1,11 @@
 import React from "react";
 
-const Card = ({ children }) => {
+const Card = ({ children, styles = {} }) => {
   return (
-    <div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-36 sm:py-36 px-20 py-16 mt-20">
+    <div
+      style={{ ...styles }}
+      className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-36 sm:py-36 px-20 py-16 my-20"
+    >
       {children}
     </div>
   );

React/src/pages/components/Heading3.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Heading3 = ({ children, styles = {} }) => {
+  return (
+    <h3
+      style={{ ...styles }}
+      className="font-light font-inter text-black-custom my-20 self-start"
+    >
+      {children}
+    </h3>
+  );
+};
+
+export default Heading3;

React/src/pages/components/VehicleRegisterForm.js

@@ -4,6 +4,12 @@ import { useSelector } from "react-redux";
 // Services
 import * as apiService from "../../services/apiService";
 
+// Components
+import Card from "./Card";
+import Heading3 from "./Heading3";
+import Button from "./Button";
+import InputText from "./inputs/InputText";
+
 const VehicleRegisterForm = () => {
   const [model, setModel] = useState("");
   const [licensePlate, setlicensePlate] = useState("");
@@ -21,46 +27,45 @@ const VehicleRegisterForm = () => {
   }
 
   return (
-    <form onSubmit={(e) => e.preventDefault()}>
-      <h3>Register Vehicle:</h3>
-      <div className="form-group">
-        <label>Model: </label>
-        <input
-          value={model}
-          type="text"
-          name="model"
-          onChange={(e) => setModel(e.target.value)}
-        />
-        <label>License Plate: </label>
-        <input
-          value={licensePlate}
-          type="text"
-          name="licensePlate"
-          onChange={(e) => setlicensePlate(e.target.value)}
-        />
-        <label>Color: </label>
-        <input
-          value={color}
-          type="text"
-          name="color"
-          onChange={(e) => setColor(e.target.value)}
-        />
-        <label>Type: </label>
-        <select
-          value={type}
-          name="type"
-          onChange={(e) => setType(e.target.value)}
-        >
-          <option value="1">Sedan</option>
-          <option value="2">SUV</option>
-          <option value="3">Pickup</option>
-        </select>
-      </div>
+    <Card styles={{ padding: "60px" }}>
+      <form onSubmit={(e) => e.preventDefault()} className="m-0 flex flex-col">
+        <Heading3 styles={{ marginTop: "0" }}>Register A Vehicle</Heading3>
 
-      <button className="btn" onClick={() => registerVehicle()}>
-        Register
-      </button>
-    </form>
+        <div className="flex flex-col">
+          <InputText
+            label="Model"
+            value={model}
+            name="model"
+            onChangeEvent={(e) => setModel(e.target.value)}
+          />
+          <InputText
+            label="License Plate"
+            value={licensePlate}
+            name="licensePlate"
+            onChangeEvent={(e) => setlicensePlate(e.target.value)}
+          />
+          <InputText
+            label="Color"
+            value={color}
+            name="color"
+            onChangeEvent={(e) => setColor(e.target.value)}
+          />
+
+          <label>Type: </label>
+          <select
+            value={type}
+            name="type"
+            onChange={(e) => setType(e.target.value)}
+          >
+            <option value="1">Sedan</option>
+            <option value="2">SUV</option>
+            <option value="3">Pickup</option>
+          </select>
+        </div>
+
+        <Button text="Register" onClickEvent={registerVehicle} />
+      </form>
+    </Card>
   );
 };
 

React/src/pages/components/VehiclesMain.js

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
+
+// Services
 import * as apiService from "../../services/apiService";
+
+// Components
 import Heading1 from "./Heading1";
+import Heading3 from "./Heading3";
 import Button from "./Button";
 import Table from "./table/Table";
 
@@ -70,10 +75,7 @@ const VehiclesMain = () => {
       {/* <p>Hello, {user.profile.given_name}.</p> */}
       {vehicleData ? (
         <>
-          <h3 className="font-light font-inter text-black-custom my-20 self-start">
-            Your Vehicles:
-          </h3>
-
+          <Heading3>Your Vehicles:</Heading3>
           <Table vehicleData={vehicleData} />
         </>
       ) : (

React/src/pages/components/inputs/InputSelect.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const InputSelect = () => {
+  return <div></div>;
+};
+
+export default InputSelect;

React/src/pages/components/inputs/InputText.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const InputText = ({ label, value, name, onChangeEvent }) => {
+  return (
+    <div>
+      <label>{label}</label>
+      <input value={value} type="text" name={name} onChange={onChangeEvent} />
+    </div>
+  );
+};
+
+export default InputText;