Scribd
Upload
5 views

Student dashboard

Uploaded by

benmaxx499
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Student dashboard

Uploaded by

benmaxx499
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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