From f1bac060207f8e27e2b5d30e9fad505888694b7e Mon Sep 17 00:00:00 2001
From: Albert Byrone <albertbyrone1677@gmail.com>
Date: Wed, 25 Jan 2023 08:47:25 +0300
Subject: [PATCH 1/2] chore: create the login view

---
 package-lock.json  | 15 ++++++++++++++
 package.json       |  1 +
 src/views/Home.tsx | 50 ++++++++++++++++++++++++++++++++++++----------
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 63659cb..c8aa46b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "dotenv": "^16.0.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1",
         "react-router-dom": "^6.7.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
@@ -13985,6 +13986,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26706,6 +26715,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index b39fe25..fd159e5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 5c07a16..f57616b 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,17 +1,45 @@
-import React from 'react'
-import useHeader from '../hooks/useHeader'
-
+import React from "react";
+import useHeader from "../hooks/useHeader";
+import { FcGoogle } from "react-icons/fc";
+import { AiFillFacebook } from "react-icons/ai";
 function Home() {
-  
   // extract the header from the hook
-  // Header extracted will be used to determine the current page    
-  const {header} = useHeader("Home")
-  
+  // Header extracted will be used to determine the current page
+  const { header } = useHeader("Home");
+
   return (
-    <div className="text-red-400 text-4xl flex justify-center items-center h-[100vh] text-center">
-      This the {header} Page
+    <div className="relative w-full h-screen bg-zinc-900/90">
+      <div className="flex justify-center items-center h-full">
+        <form className="max-w-[400px] w-full mx-auto bg-white p-8">
+          <h2 className="text-4xl font-bold text-center py-4">THE FORCE</h2>
+          <div className="flex justify-between py-8">
+            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
+              <FcGoogle className="mr-2" /> Google
+            </p>
+            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
+              <AiFillFacebook className="mr-2" /> Facebook
+            </p>
+          </div>
+          <div className="flex flex-col mb-4">
+            <label>Username</label>
+            <input type="text" className="border relative bg-gray-100 p-2" />
+          </div >
+          <div className="flex flex-col">
+            <label>Password</label>
+            <input type="password" className="border relative bg-gray-100 p-2" />
+          </div>
+          <button className="w-full py-4 mt-8 bg-zinc-900/90 text-white">Sign In</button>
+          <div>
+            <p className="flex items-center mt-2">
+              <input type="checkbox"  className="mr-2"/>
+              Remember Me
+            </p>
+            <p className="text-center mt-8">Create an account</p>
+          </div>
+        </form>
+      </div>
     </div>
-  )
+  );
 }
 
-export default Home
\ No newline at end of file
+export default Home;

From 8906ac9c77af9013a508bf4bf92b2d46884f290d Mon Sep 17 00:00:00 2001
From: Albert Byrone <albertbyrone1677@gmail.com>
Date: Wed, 25 Jan 2023 11:08:51 +0300
Subject: [PATCH 2/2] style: move the login view to a newly created component
 with a different route

---
 src/App.tsx         |  2 ++
 src/views/Home.tsx  | 39 +++++++------------------------------
 src/views/Login.tsx | 47 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 32 deletions(-)
 create mode 100644 src/views/Login.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b3af05b..a9498ad 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,13 @@ import React from "react";
 import { Routes, Route } from "react-router-dom";
 import "./App.css";
 import Home from "./views/Home";
+import Login from "./views/Login";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/login" element={<Login />} />
     </Routes>
   );
 }
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index f57616b..af1e419 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,43 +1,18 @@
 import React from "react";
 import useHeader from "../hooks/useHeader";
-import { FcGoogle } from "react-icons/fc";
-import { AiFillFacebook } from "react-icons/ai";
+
 function Home() {
+
+  // extract the header from the hook
+  // Header extracted will be used to determine the current page
+
   // extract the header from the hook
   // Header extracted will be used to determine the current page
   const { header } = useHeader("Home");
 
   return (
-    <div className="relative w-full h-screen bg-zinc-900/90">
-      <div className="flex justify-center items-center h-full">
-        <form className="max-w-[400px] w-full mx-auto bg-white p-8">
-          <h2 className="text-4xl font-bold text-center py-4">THE FORCE</h2>
-          <div className="flex justify-between py-8">
-            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
-              <FcGoogle className="mr-2" /> Google
-            </p>
-            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
-              <AiFillFacebook className="mr-2" /> Facebook
-            </p>
-          </div>
-          <div className="flex flex-col mb-4">
-            <label>Username</label>
-            <input type="text" className="border relative bg-gray-100 p-2" />
-          </div >
-          <div className="flex flex-col">
-            <label>Password</label>
-            <input type="password" className="border relative bg-gray-100 p-2" />
-          </div>
-          <button className="w-full py-4 mt-8 bg-zinc-900/90 text-white">Sign In</button>
-          <div>
-            <p className="flex items-center mt-2">
-              <input type="checkbox"  className="mr-2"/>
-              Remember Me
-            </p>
-            <p className="text-center mt-8">Create an account</p>
-          </div>
-        </form>
-      </div>
+    <div className="text-red-400 text-4xl flex justify-center items-center h-[100vh] text-center">
+      This the {header} Page
     </div>
   );
 }
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
new file mode 100644
index 0000000..cab2e9d
--- /dev/null
+++ b/src/views/Login.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import useHeader from "../hooks/useHeader";
+import { FcGoogle } from "react-icons/fc";
+import { AiFillFacebook } from "react-icons/ai";
+
+function Login() {
+  return (
+    <div className="relative w-full h-screen bg-zinc-900/90">
+      <div className="flex justify-center items-center h-full">
+        <form className="max-w-[400px] w-full mx-auto bg-white p-8">
+          <h2 className="text-4xl font-bold text-center py-4">THE FORCE</h2>
+          <div className="flex justify-between py-8">
+            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
+              <FcGoogle className="mr-2" /> Google
+            </p>
+            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
+              <AiFillFacebook className="mr-2" /> Facebook
+            </p>
+          </div>
+          <div className="flex flex-col mb-4">
+            <label>Username</label>
+            <input type="text" className="border relative bg-gray-100 p-2" />
+          </div>
+          <div className="flex flex-col">
+            <label>Password</label>
+            <input
+              type="password"
+              className="border relative bg-gray-100 p-2"
+            />
+          </div>
+          <button className="w-full py-4 mt-8 bg-zinc-900/90 text-white">
+            Sign In
+          </button>
+          <div>
+            <p className="flex items-center mt-2">
+              <input type="checkbox" className="mr-2" />
+              Remember Me
+            </p>
+            <p className="text-center mt-8">Create an account</p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;