Create the Login component and reuse the register component's scss in…

… login component

src/app/Interfaces/ILogin.ts

@@ -0,0 +1,3 @@
+export interface ILogin{
+
+                      }

src/app/components/Layout/Layout.tsx

@@ -6,6 +6,7 @@ import Cart from "app/components/Cart/Cart";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import PageNotFound from "app/components/PageNotFound/PageNotFound";
 import Register from "app/components/Register/Register";
+import Login from "app/components/Login/Login";
 const Layout = React.memo(() => {
   return (
     <Router>
@@ -15,6 +16,7 @@ const Layout = React.memo(() => {
       <Routes>
         <Route path="/" element={<Homepage />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/login" element={<Login />} />
         <Route path="/cart" element={<Cart />} />
         <Route path="*" element={<PageNotFound />} />
       </Routes>

src/app/components/Login/Login.module.scss

@@ -0,0 +1,17 @@
+.login {
+  min-height: 80vh;
+  padding: 40px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form {
+  border: 1px solid rgba($color: #000000, $alpha: 0.1);
+  padding: 20px;
+}
+
+.formTitle {
+  font-family: "Cabin", sans-serif;
+  margin-bottom: 10px;
+}

src/app/components/Login/Login.module.scss.d.ts

@@ -0,0 +1,3 @@
+export const login: string;
+export const form: string;
+export const formTitle: string;

src/app/components/Login/Login.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import styles from "app/components/Register/Register.module.scss";
+import InputLabelGroup from "../InputLabelGroup/InputLabelGroup";
+import { Formik, Form } from "formik";
+import PrimaryButton from "app/components/Buttons/PrimaryButton/PrimaryButton";
+const Login = () => {
+  const initialValues = { email: "", password: "" };
+  const [formData, setFormData] = useState(initialValues);
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={(values) => setFormData(values)}
+    >
+      <div className={styles.login}>
+        <Form className={styles.form}>
+          <h2 className={styles.formTitle}>Login</h2>
+          <p className={styles.formDescription}>
+            Please login to unleash the features of WooleSale that only true
+            customers can have.
+          </p>
+          <InputLabelGroup name="email" label="Email" type="email" />
+          <InputLabelGroup name="password" label="Password" type="password" />
+          <PrimaryButton type="submit">Login</PrimaryButton>
+        </Form>
+      </div>
+    </Formik>
+  );
+};
+export default Login;

src/app/components/Register/Register.module.scss

@@ -6,6 +6,16 @@
   padding: 40px 20px;
   gap: 20px;
 }
+.login {
+  min-height: 80vh;
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+  align-items: center;
+  min-width: 270px;
+  max-width: 500px;
+  margin: auto;
+}
 
 .form {
   border: 1px solid rgba($color: #000000, $alpha: 0.1);
@@ -58,15 +68,17 @@
   }
 }
 @media only screen and(max-width:425px) {
-  .register {
+  .register,
+  .login {
     padding: 20px;
   }
   .helperSection {
     width: 100%;
   }
 }
 @media only screen and(max-width:375px) {
-  .register {
+  .register,
+  .login {
     padding: 10px;
   }
 }

src/app/components/Register/Register.module.scss.d.ts

@@ -1,4 +1,5 @@
 export const register: string;
+export const login: string;
 export const form: string;
 export const formTitle: string;
 export const formDescription: string;