72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Head from "next/head";
|
|
import UserResultChart from "@/components/UserResultChart";
|
|
import Navbar from "@/components/Navbar";
|
|
import Icon from "@mdi/react";
|
|
import {mdiPlus} from "@mdi/js";
|
|
import Link from "next/link";
|
|
import clsx from "clsx";
|
|
import {infoButtonStyle} from "@/constants/buttonStyles";
|
|
import ProfileCard from "@/components/ProfileCard";
|
|
|
|
// TODO: Remove this import
|
|
import JSON_RESULTS from "@/demo/user_results.json";
|
|
|
|
import {withIronSessionSsr} from "iron-session/next";
|
|
import {sessionOptions} from "@/lib/session";
|
|
import {User} from "@/interfaces/user";
|
|
|
|
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
|
const user = req.session.user;
|
|
|
|
if (!user) {
|
|
res.setHeader("location", "/login");
|
|
res.statusCode = 302;
|
|
res.end();
|
|
return {
|
|
props: {
|
|
user: null,
|
|
},
|
|
};
|
|
}
|
|
|
|
return {
|
|
props: {user: req.session.user},
|
|
};
|
|
}, sessionOptions);
|
|
|
|
export default function Home({user}: {user: User}) {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>IELTS GPT | Muscat Training Institute</title>
|
|
<meta
|
|
name="description"
|
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
|
|
<Navbar profilePicture={user.profilePicture} />
|
|
<div className="w-full h-full p-4 relative">
|
|
<Link href="/exam">
|
|
<button className={clsx("btn gap-2 top-12 right-12 absolute", infoButtonStyle)}>
|
|
<Icon path={mdiPlus} color="white" size={1} />
|
|
New Exam
|
|
</button>
|
|
</Link>
|
|
<section className="h-full w-full flex items-center p-8 gap-12 justify-center">
|
|
<section className="w-1/2 h-full flex items-center">
|
|
<ProfileCard user={user} className="text-black self-start" />
|
|
</section>
|
|
<section className="w-1/2 h-full flex items-center justify-center">
|
|
<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-2/3" />
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|