diff --git a/React/src/pages/components/Card.js b/React/src/pages/components/Card.js index 6102fa1..3c22a51 100644 --- a/React/src/pages/components/Card.js +++ b/React/src/pages/components/Card.js @@ -1,8 +1,11 @@ import React from "react"; -const Card = ({ children }) => { +const Card = ({ children, styles = {} }) => { return ( -
+
{children}
); diff --git a/React/src/pages/components/Heading3.js b/React/src/pages/components/Heading3.js new file mode 100644 index 0000000..8a32395 --- /dev/null +++ b/React/src/pages/components/Heading3.js @@ -0,0 +1,14 @@ +import React from "react"; + +const Heading3 = ({ children, styles = {} }) => { + return ( +

+ {children} +

+ ); +}; + +export default Heading3; diff --git a/React/src/pages/components/VehicleRegisterForm.js b/React/src/pages/components/VehicleRegisterForm.js index 92afd1d..16c0168 100644 --- a/React/src/pages/components/VehicleRegisterForm.js +++ b/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 ( -
e.preventDefault()}> -

Register Vehicle:

-
- - setModel(e.target.value)} - /> - - setlicensePlate(e.target.value)} - /> - - setColor(e.target.value)} - /> - - -
+ + e.preventDefault()} className="m-0 flex flex-col"> + Register A Vehicle - - +
+ setModel(e.target.value)} + /> + setlicensePlate(e.target.value)} + /> + setColor(e.target.value)} + /> + + + +
+ +