Scribd
Upload
5 views

Student dashboard

Uploaded by

benmaxx499
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Student dashboard

Uploaded by

benmaxx499
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import { useState } from "react";

import { Link, Navigate, useRoutes } from "react-router-dom";


import TakeExam from "./TakeExam";
import ViewProfile from "./ViewProfile";
import LogOut from "./logout";
import StudentLogin from "../../pages/signup&login/StudentLogin";

const StudentDashboard = () => {


const [currentTab, setCurrentTab] = useState("TakeExam");
const [logOut, setLogOut] = useState(false);

const handleTabClick = (tabName) => {


setCurrentTab(tabName);
};

const toggleLogout = () => {


setLogOut(!logOut);
};

const renderTabs = () => (


<ul className="tab-items text-white">
<li
className={`tab text-xl font-semibold p-3 ${
currentTab === "TakeExam" ? "text-green-300" : "text-white"
}`}
>
<Link
to="/StudentDashboard/TakeExam"
onClick={() => handleTabClick("TakeExam")}
>
Take Exam
</Link>
</li>

<li
className={`tab text-xl font-semibold p-3 ${
currentTab === "ViewProfile" ? "text-green-300" : "text-white"
}`}
>
<Link
to="/StudentDashboard/ViewProfile"
onClick={() => handleTabClick("ViewProfile")}
>
View Profile
</Link>
</li>

<li
className={`tab text-xl font-semibold p-3 ${currentTab === "logOut" ?
"text-green-300" : "text-white"}`}
onClick={toggleLogout}
>
Logout
</li>
</ul>
);

// Use React Router's useRoutes hook for declarative routing


const routes = useRoutes([
{
path: "/StudentDashboard/TakeExam",
element: <TakeExam />,
},
{
path: "/StudentDashboard/ViewProfile",
element: <ViewProfile />,
},
// No explicit route for "logOut" - it handles logout logic
// Optionally, you could add a redirect route here
// {
// path: "/StudentDashboard/logOut",
// element: <Navigate to="/login" />, // Redirect to login after logout
// },
// Catch-all route for unmatched paths (404)
{
path: "*",
element: <Navigate to="/not-found" />, // Redirect to a custom 404 page
},
]);

return (
<>
<div className="interface flex text-green-300">
<div className="side-bar bg-green-500 w-1/5 h-screen pt-6">
<img className="h-24 w-24 mb-10" src="/assets/logo.png" alt="logo" />
{renderTabs()}
</div>
<div className="content w-4/5">
<div className="top">
<p className="greeting text-2xl font-medium mb-20 py-6 px-3 bg-green-
200">
Hi, userData.firstname
</p>
</div>
<div className="tab-contents">{routes}</div>
</div>
</div>
{logOut && <LogOut onClose={toggleLogout} />}
</>
);
};

export default StudentDashboard;

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy