ditkrg/AuthorizationServerDemos
4
0
Fork 0
mirror of https://github.com/ditkrg/AuthorizationServerDemos.git synced 2026-01-23 03:36:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Uses composition in React to reuse components

Browse Source
This commit is contained in:
Vazhin Tayeb 2021-01-15 12:36:02 +03:00 committed by Muhammad Azeez
parent 5b35e747b9
commit eef3243eb6
3 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
React/src/pages/components/Card.js
View File

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

10
React/src/pages/components/LoginWindow.js
View File

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

4
React/src/pages/components/VehicleRegisterForm.js
View File

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