Adding Login UI

Author: CodeMonitor-lab

facebook-login-clone/src/App.jsx

@@ -1,12 +1,14 @@
 import { useState } from 'react'
 import './App.css'
+import { Link } from 'react-router-dom'
+import Routes from './Routes'
+
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
     <>
-    <h1>Home app page</h1>
+    <Routes/>
     </>
   )
 }

facebook-login-clone/src/Components/Common/Button.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Button = () => {
+  return (
+    <div>Button</div>
+  )
+}
+
+export default Button

facebook-login-clone/src/Components/Common/Input.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Input = ({ type = 'text', name,email,password,placeholder}) => {
+  return <input className='flex p-3 mb-3 w-full text-lg border-2 rounded border-gray-300' type={type} name={name} placeholder={placeholder} />
+}
+
+export default Input

facebook-login-clone/src/Components/Login.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { Input, Button } from "./index";
+
+const Login = () => {
+    return (
+        <>
+        <main className="min-h-screen p-3 bg-gray-100 flex flex-col items-center justify-center">
+      <section className="flex flex-col md:flex-row w-full max-w-6xl gap-10 justify-center items-center">
+        <article className="md:w-1/2 text-center md:text-left">
+          <h1 className="text-6xl font-bold text-blue-600">facebook</h1>
+          <p className="text-2xl mt-4 mb-6 font-semibold">
+            Facebook helps you connect and share with the people in your life.
+          </p>
+        </article>
+       <form
+          className="bg-white shadow-md rounded p-5 w-full max-w-md"
+          action="#!"
+        >
+          <div className="space-y-4">
+            <Input
+              type="email"
+              name="email"
+              placeholder="Email address or Phone number"
+              autoComplete="off"
+            />
+            <Input
+              type="password"
+              name="password"
+              placeholder="Password"
+              autoComplete="new-password"
+            />
+
+            <button
+              className="bg-blue-600 rounded text-2xl w-full text-center font-bold p-2 text-white"
+              type="submit"
+            >
+              Log in
+            </button>
+
+            <NavLink
+              to="/forgot-password"
+              className="block text-center text-blue-500 mt-3"
+            >
+              Forgotten password?
+            </NavLink>
+
+            <hr className="my-4" />
+
+            <div className="flex justify-center">
+              <NavLink to="/signup">
+                <li className="rounded text-white bg-green-500 list-none px-6 py-3 text-center text-xl font-bold">
+                  Create new account
+                </li>
+              </NavLink>
+            </div>
+          </div>
+        </form>
+      </section>
+    </main>
+    </>
+  );
+};
+
+export default Login;

facebook-login-clone/src/Components/SignUp.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SignUp = () => {
+  return (
+    <div>SignUp</div>
+  )
+}
+
+export default SignUp

facebook-login-clone/src/Components/index.js

@@ -0,0 +1,4 @@
+export {default as Login} from './Login'
+export {default as SignUp} from './SignUp'
+export {default as Input} from './Common/Input'
+export {default as Button} from './Common/Button'

facebook-login-clone/src/Routes.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {Login,SignUp} from './Components/index'
+import {createBrowserRouter, RouterProvider} from 'react-router-dom'
+
+const Routes = () => {
+    const router = createBrowserRouter([
+        {
+            path:'/',
+            element:<Login/>
+        },
+        {
+            path:'/SignUp',
+            element:<SignUp/>
+        },
+        {},
+    ])
+  return (
+    <RouterProvider router={router} />
+  )
+}
+
+export default Routes