Uses composition in React to reuse components

React/src/pages/components/Card.js

@@ -1,9 +1,9 @@
 import React from "react";
 
-const Card = ({ component: Component }) => {
+const Card = ({ children }) => {
   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">
-      <Component />
+      {children}
     </div>
   );
 };

React/src/pages/components/LoginWindow.js

@@ -5,7 +5,7 @@ import store from "../../store";
 import Heading1 from "./Heading1";
 import Card from "./Card";
 
-const LoginContent = () => {
+const LoginWindow = () => {
   const onUserLogin = () => {
     const user = { profile: { given_name: "John Doe" } };
     console.log(`User logged in!`);
@@ -13,19 +13,15 @@ const LoginContent = () => {
   };
 
   return (
-    <>
+    <Card>
       <Heading1 text={"Traffic Police Service"} />
 
       <p className="text-black-custom font-light text-3xl mb-20">
         Login to your account to view your dashboard and register a new vehicle.
       </p>
       <Button onClickEvent={onUserLogin} text={"Login"} />
-    </>
+    </Card>
   );
 };
 
-const LoginWindow = () => {
-  return <Card component={LoginContent} />;
-};
-
 export default LoginWindow;

React/src/pages/components/VehicleRegisterForm.js

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
+
+// Services
 import * as apiService from "../../services/apiService";
 
 const VehicleRegisterForm = () => {
@@ -19,7 +21,7 @@ const VehicleRegisterForm = () => {
   }
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="shadow">
+    <form onSubmit={(e) => e.preventDefault()}>
       <h3>Register Vehicle:</h3>
       <div className="form-group">
         <label>Model: </label>