Merge pull request #6 from sinatra-pod/Albert-Byrone/TF-21/login-view

chore: create the login view

package.json

@@ -14,6 +14,7 @@
     "firebase": "^9.16.0",
     "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",

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>
   );
 }

src/views/Home.tsx

@@ -1,17 +1,20 @@
-import React from 'react'
-import useHeader from '../hooks/useHeader'
+import React from "react";
+import useHeader from "../hooks/useHeader";
 
 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")
-  
+  // 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>
-  )
+  );
 }
 
-export default Home
+export default Home;

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;