Your commit message here

Author: hassanamir05

src/App.jsx

@@ -1,7 +1,6 @@
 import { Login, Signup, FourOfour, Verification, Dashboard } from "./Pages"
 
 import { createBrowserRouter, RouterProvider } from "react-router-dom"
-import { AppLayout } from "./Layout"
 
 import { useSelector } from "react-redux"
 
@@ -12,25 +11,23 @@ function App() {
  const router = createBrowserRouter([
  {
  path: '/',
- element: <AppLayout />,
- children: [
- {
- path: 'login',
- element: <Login />
- },
- {
- path: 'signup',
- element: <Signup />
- },
- {
- path: 'verification',
- element: <Verification email={email} />
- },
- {
- path: 'dashboard',
- element: <Dashboard />
- }
- ]
+ element: <Login />
+ },
+ {
+ path: '/login',
+ element: <Login />
+ },
+ {
+ path: '/signup',
+ element: <Signup />
+ },
+ {
+ path: '/verification',
+ element: <Verification email={email} />
+ },
+ {
+ path: '/dashboard',
+ element: <Dashboard />
  },
  {
  path: '*',

src/Layout/AppLayout.jsx

@@ -1,6 +1,11 @@
 import React from 'react'
 
 const FourOfour = () => {
+
+ const backToLogin = () => {
+ window.location.href = '/login';
+ }
+
  return (
  <div className="lg:px-24 lg:py-24 md:py-20 md:px-44 px-4 py-24 items-center flex justify-center flex-col-reverse lg:flex-row md:gap-28 gap-16">
  <div className="xl:pt-24 w-full xl:w-1/2 relative pb-12 lg:pb-0">
@@ -13,7 +18,7 @@ const FourOfour = () => {
  doorway to the great nothing
  </h1>
  <p className="my-2 text-gray-800">Sorry about that! Please visit our hompage to get where you need to go.</p>
- <button className="sm:w-full lg:w-auto my-2 border rounded md py-4 px-8 text-center bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-700 focus:ring-opacity-50">Take me there!</button>
+ <button className="sm:w-full lg:w-auto my-2 border rounded md py-4 px-8 text-center bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-700 focus:ring-opacity-50" onClick={backToLogin}>Take me there!</button>
  </div>
  </div>
  <div>

src/Layout/index.jsx

@@ -1,6 +1,7 @@
-//Firebase
 import { auth } from '../../Firebase/firebase';
 
+//React Hooks
+import { useState, useEffect } from 'react';
 
 //Components
 import { Button } from '../../Components';
@@ -9,62 +10,38 @@ import { Button } from '../../Components';
 import { toast, ToastContainer } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 
-
-// const contacts = ['Contact 1', 'Contact 2', 'Contact 3', 'Contact 4', 'Contact 5', 'Contact 6'];
-
-
 const Dashboard = () => {
 
-
  const handleSignout = () => {
  auth.signOut()
- toast.error(('Signing Out!'), {
+ toast.error('Signing Out!', {
  position: 'top-right'
- })
+ });
  setTimeout(() => {
- window.location.href = 'login'
- }, 2000)
- }
+ window.location.href = '/login';
+ }, 2000);
+ };
 
- return (
- // <div className="min-h-screen flex bg-gray-100">
- // {/* Sidebar */}
- // <aside className="bg-white bg-opacity-10 backdrop-blur-md h-screen w-64 p-5 shadow-lg flex flex-col justify-between">
- // <nav className="space-y-6 text-xl text-gray-800 flex flex-col gap-y-[20px]">
- // <button className="hover:text-gray-600">Chats</button>
- // <button className="hover:text-gray-600">Contacts</button>
- // <button className="hover:text-gray-600">Settings</button>
- // </nav>
- // <button className="w-full py-3 bg-red-500 hover:bg-red-600 text-white text-lg rounded-lg">Logout</button>
- // </aside>
-
- // {/* Main Section */}
- // <main className="flex-1 flex p-6 justify-center items-center">
- // {/* Contact List */}
- // <section className="w-1/3 bg-white bg-opacity-10 backdrop-blur-md rounded-lg shadow-lg p-4 overflow-y-auto h-[80vh]">
- // <h2 className="text-lg font-bold mb-4 text-center">Contacts</h2>
- // <div className="space-y-4">
- // {contacts.map((contact, index) => (
- // <button key={index} className="w-full p-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-gray-800">
- // {contact}
- // </button>
- // ))}
- // </div>
- // </section>
+ const [currentUser, setCurrentUser] = useState('');
 
-  // {/* Scrollable Chat Section */}
- // <section className="flex-1 ml-6 bg-white bg-opacity-10 backdrop-blur-md rounded-lg shadow-lg p-4 h-[80vh]">
- // <div className="overflow-y-auto h-full">
- //  <p className="text-center text-lg text-gray-600">Scrollbar content</p>
- // </div>
- //  </section>
- // </main>
-  // </div>
+ useEffect(() => {
+ const user = auth.currentUser;
+ if (user) {
+ setCurrentUser(user.displayName);
+ } else {
+ setCurrentUser('');
+ }
+ }, []);
 
+ return (
  <>
  <div className='w-full h-full min-h-screen flex flex-col justify-center items-center'>
- <p>Welcome {auth.currentUser.displayName}</p>
- <Button name="Signout" customClass='bg-red-500 hover:bg-red-400 max-w-[350px] w-full mx-[30px]' onCLick={handleSignout} />
+ <p>Welcome {currentUser || 'User'}</p>
+ <Button
+ name="Signout"
+ customClass='bg-red-500 hover:bg-red-400 max-w-[350px] w-full mx-[30px]'
+ onClick={handleSignout}
+ />
  </div>
  <ToastContainer />
  </>