kalunge/TF-22-registration-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 Register from "./views/Register";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/register" element={<Register />} />
     </Routes>
   );
 }

src/views/Register.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+// import {Link} from 'react-router-dom'
+import { FcGoogle } from "react-icons/fc";
+import { AiFillFacebook } from "react-icons/ai";
+function Register() {
+  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">
+              <a className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center"  href="#"><FcGoogle className="mr-2" /> Google</a>
+              <a className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center" href="#"><AiFillFacebook className="mr-2" /> Facebook</a>
+          </div>
+          <div className="flex flex-col mb-4">
+            <label>Email</label>
+            <input type="email" className="border relative bg-gray-100 p-2" />
+          </div >
+          <div className="flex flex-col  mb-4">
+            <label>Password</label>
+            <input type="password" className="border relative bg-gray-100 p-2" />
+          </div>
+
+          <div className="flex flex-col ">
+            <label>Confirm 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 Up</button>
+          <div>
+            <p className="text-center mt-8">Login to your existing account</p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+export default Register;