Auth Context - Copy this React, Tailwind Component to your project

Import { useState } from "react"; import { BsArrowLeftShort } from "react icons/bs"; import { IoSettingsOutline } from "react icons/io5"; import PurchaseHistory from "./PurchaseHistory"; import ChangePassword from "./ChangePassword"; import MyProfile from "./MyProfile"; import LogOut from "./LogOut"; const DashboardStudent = () => { const [open, setOpen] = useState(true); const [selectedPage, setSelectedPage] = useState("MyProfile"); // Mặc định là MyProfile const [isLogoutOpen, setIsLogoutOpen] = useState(false); // Hàm xử lý đăng xuất const handleLogout = () => { console.log("User logged out"); setIsLogoutOpen(false); // Thêm logic điều hướng về trang đăng nhập nếu cần }; // Danh sách menu const menuItems = [ { title: "My Profile", page: "MyProfile" }, { title: "Purchase History", page: "PurchaseHistory" }, { title: "Setting", page: "Setting" }, { title: "Change Password", page: "ChangePassword" }, { title: "Payment & Billing", page: "Payment", spacing: true }, { title: "Logout", page: "Logout" }, ]; return ( <div className="flex"> {/* Sidebar */} <div className={`bg slate 500 h screen p 5 pt 8 duration 300 relative ${open ? "w 72" : "w 20"}`}> {/* Nút toggle sidebar */} <BsArrowLeftShort className={`bg red 500 text secondary foreground text 3xl rounded full absolute right 3 top 9 border cursor pointer ${!open && "rotate 180"}`} onClick={() => setOpen(!open)} /> {/* Phần icon và tiêu đề */} <div className="inline flex items center"> <IoSettingsOutline className={`text 4xl rounded cursor pointer block float left mr 2 duration 500 ${open && "rotate [360deg]"}`} /> <h1 className={`text white origin left font medium text 2xl duration 300 ${!open && "scale 0"}`}> Setting </h1> </div> {/* Danh sách menu */} <ul className="pt 2"> {menuItems.map((menu, index) => ( <li key={index} className="text gray 300 text sm flex items center gap x 4 cursor pointer p 2 hover:bg light white rounded md mt 2" onClick={() => { if (menu.page === "Logout") { setIsLogoutOpen(true); } else { setSelectedPage(menu.page); } }} > <span className={`text base font medium flex 1 duration 200 ${!open && "hidden"}`}> {menu.title} </span> </li> ))} </ul> </div> {/* Nội dung chính */} <div className="p 7 w full"> {selectedPage === "MyProfile" && <MyProfile />} {selectedPage === "ChangePassword" && <ChangePassword />} {selectedPage === "PurchaseHistory" && <PurchaseHistory />} {selectedPage === "Setting" && <h1 className="text 2xl font semibold">Settings</h1>} {/* Popup đăng xuất */} {isLogoutOpen && <LogOut isOpen={isLogoutOpen} onClose={() => setIsLogoutOpen(false)} onLogout={handleLogout} />} </div> </div> ); }; export default DashboardStudent; add corresponding path to each page when clicked eg http://localhost:5173/student/dashboard/Setting will clean the setting page