This is my react project

83202 · Mar 18, 2024 · a43fb0c · a43fb0c
commit a43fb0c
Show file tree

Hide file tree

Showing 27 changed files with 18,553 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# React Router Project Starter
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "router-project",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.0",
+    "react-icons": "^4.12.0",
+    "react-router-dom": "^6.22.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.2.7"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- Google Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>React Router | Codehelp</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+    overflow-x: hidden;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,39 @@
+import { Route, Routes } from "react-router-dom";
+import "./App.css";
+import Navbar from "./components/Navbar"
+import Home from "./pages/Home"
+import Login from "./pages/Login"
+import Signup from "./pages/Signup"
+import Dashboard from "./pages/Dashboard"
+import { useEffect, useState } from 'react'
+import PrivateRoute from "./components/PrivateRoute";
+
+
+function App() {
+
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+
+  return (
+    <div className="w-screen min-h-[100vh] bg-richblack-900 flex flex-col">
+      <Navbar isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn}/>
+
+      <Routes> 
+
+        <Route path="/" element= {<Home isLoggedIn={isLoggedIn}/>} />
+        <Route path="/login" element = {<Login  setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/signup" element={<Signup  setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/dashboard" element = {
+          <PrivateRoute isLoggedIn={isLoggedIn}>
+              <Dashboard/>
+          </PrivateRoute>
+
+        } />
+
+      </Routes>
+
+    </div>
+    )
+}
+
+export default App;
diff --git a/src/assets/Logo.svg b/src/assets/Logo.svg
diff --git a/src/assets/frame.png b/src/assets/frame.png
diff --git a/src/assets/login.png b/src/assets/login.png
diff --git a/src/assets/signup.png b/src/assets/signup.png
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
+import { Link, useNavigate } from 'react-router-dom';
+import { toast } from 'react-hot-toast';
+
+
+const LoginForm = ({setIsLoggedIn}) => {
+
+    const navigate = useNavigate();
+
+    const [formData, setFormData] = useState( {
+        email:"", password:""
+    })
+
+    const[showPassword, setShowPassword] = useState(false);
+
+    function changeHandler(event) {
+
+        setFormData( (prevData) =>(
+            {
+                ...prevData,
+                [event.target.name]:event.target.value
+            }
+        ) )
+
+    }
+
+    function submitHandler(event) {
+        event.preventDefault();
+        setIsLoggedIn(true);
+        toast.success("Logged In");
+        console.log("Printing the formData ");
+        console.log(formData)
+        navigate("/dashboard");
+    }
+
+  return (
+    <form onSubmit={submitHandler}
+    className="flex flex-col w-full gap-y-4 mt-6">
+
+        <label className='w-full'>
+            <p className='text-[0.875rem] text-richblack-5 mb-1 leading-[1.375rem]'>
+                Email Address<sup className='text-pink-200'>*</sup>
+            </p>
+            <input 
+                required
+                type="email"
+                value = {formData.email}
+                onChange={changeHandler}
+                placeholder="Enter email address"
+                name="email"
+                className='bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px] border border-richblack-200 border-r-0 border-l-0 border-t-0 border-b-2'
+            />
+        </label>
+
+        <label className='w-full relative'>
+            <p className='text-[0.875rem] text-richblack-5 mb-1 leading-[1.375rem] z-[-1]'>
+                Password<sup className='text-pink-200'>*</sup>
+            </p>
+            <input 
+                required
+                type= {showPassword ? ("text") : ("password")}
+                value = {formData.password}
+                onChange={changeHandler}
+                placeholder="Enter Password"
+                name="password"
+                className='bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px] border border-richblack-200 border-r-0 border-l-0 border-t-0 border-b-2'
+            />
+
+            <span 
+            className='absolute right-3 top-[38px] cursor-pointer z-[10]'
+            onClick={() => setShowPassword((prev) => !prev)}>
+                {showPassword ? 
+
+                (<AiOutlineEyeInvisible fontSize={24} fill='#AFB2BF'/>) : 
+
+                (<AiOutlineEye fontSize={24} fill='#AFB2BF'/>)}
+            </span>
+
+            <Link to="#">
+                <p className='text-xs mt-1 text-blue-100 max-w-max ml-auto'>
+                    Forgot Password
+                </p>
+            </Link>
+        </label>
+
+        <button className='bg-yellow-50 rounded-[8px] font-medium text-richblack-900 px-[12px] py-[8px] mt-6'>
+            Sign In
+        </button>
+
+    </form>
+  )
+}
+
+export default LoginForm
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,85 @@
+import React from 'react'
+import logo from "../assets/Logo.svg"
+import { Link, useNavigate } from "react-router-dom"
+import { toast } from "react-hot-toast"
+
+const Navbar = (props) => {
+    let isLoggedIn = props.isLoggedIn;
+    let setIsLoggedIn = props.setIsLoggedIn;
+
+    const navigate = useNavigate();
+
+    function clickHandler() {
+        navigate('/')
+    }
+
+
+    return (
+        <div className='flex justify-between items-center w-11/12 max-w-[1160px] py-4 mx-auto'>
+
+            <Link to="/">
+                <img src={logo} alt="Logo" width={160} height={32} loading="lazy" />
+            </Link>
+
+            <nav className='hidden md:block'>
+                <ul className='text-richblack-100 flex gap-x-6'>
+                    <li>
+                        <Link to="/">Home</Link>
+                    </li>
+                    <li>
+                        <Link to="/">About</Link>
+                    </li>
+                    <li>
+                        <Link to="/">Contact</Link>
+                    </li>
+                </ul>
+            </nav>
+
+            {/* Login - SignUp - LogOut - Dashboard */}
+            <div className='items-center gap-x-4 hidden md:flex'>
+                {!isLoggedIn &&
+                    <Link to="/login">
+                        <button className='bg-richblack-800 text-richblack-100 py-[8px] 
+                    px-[12px] rounded-[8px] border border-richblack-700'>
+                            Log in
+                        </button>
+                    </Link>
+                }
+                {!isLoggedIn &&
+                    <Link to="/signup">
+                        <button className='bg-richblack-800 text-richblack-100 py-[8px] 
+                    px-[12px] rounded-[8px] border border-richblack-700'>
+                            Sign up
+                        </button>
+                    </Link>
+                }
+                {isLoggedIn &&
+                    <Link to="/">
+                        <button onClick={() => {
+                            setIsLoggedIn(false);
+                            toast.success("Logged Out");
+                        }}
+                            className='bg-richblack-800 text-richblack-100 py-[8px] 
+                    px-[12px] rounded-[8px] border border-richblack-700'>
+                            Log Out
+                        </button>
+                    </Link>
+                }
+                {isLoggedIn &&
+                    <Link to="/dashboard">
+                        <button
+                            className='bg-richblack-800 text-richblack-100 py-[8px] 
+                    px-[12px] rounded-[8px] border border-richblack-700'>
+                            Dashboard
+                        </button>
+                    </Link>
+                }
+            </div>
+
+            <button onClick={clickHandler} class="mr-4 md:hidden"><svg stroke="currentColor" fill="#AFB2BF" stroke-width="0" viewBox="0 0 1024 1024" font-size="24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg></button>
+
+        </div>
+    )
+}
+
+export default Navbar
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+
+
+function PrivateRoute({isLoggedIn,children})
+{
+
+    if(isLoggedIn)
+    {
+        return children;
+    }
+
+    else{ 
+        return <Navigate to="/login" />
+    }
+}
+
+export default PrivateRoute;