Files
encoach_frontend/src/components/Navbar.tsx
2023-05-01 19:49:56 +01:00

76 lines
1.7 KiB
TypeScript

import axios from "axios";
import Link from "next/link";
import {useRouter} from "next/router";
import {Button} from "primereact/button";
import {Menubar} from "primereact/menubar";
import {MenuItem} from "primereact/menuitem";
interface Props {
profilePicture: string;
timer?: number;
showExamEnd?: boolean;
}
/* eslint-disable @next/next/no-img-element */
export default function Navbar({profilePicture, timer, showExamEnd = false}: Props) {
const router = useRouter();
const logout = async () => {
axios.post("/api/logout").finally(() => {
router.push("/login");
});
};
const items: MenuItem[] = [
{
label: "Home",
icon: "pi pi-fw pi-home",
url: "/",
},
{
label: "Account",
icon: "pi pi-fw pi-user",
url: "/profile",
},
{
label: "Exam",
icon: "pi pi-fw pi-plus-circle",
url: "/exam",
},
{
label: "Users",
icon: "pi pi-fw pi-users",
items: [
{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"},
{label: "History", icon: "pi pi-fw pi-history", url: "/history"},
],
},
{
label: "Logout",
icon: "pi pi-fw pi-power-off",
command: logout,
},
];
const endTimer = timer && (
<span className="pr-2 font-semibold">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</span>
);
const endNewExam = (
<Link href="/exam" className="pr-2">
<Button text label="Exam" severity="secondary" size="small" />
</Link>
);
return (
<div className="bg-neutral-100 z-10 w-full p-2">
<Menubar model={items} end={showExamEnd ? endNewExam : endTimer} />
</div>
);
}