50 lines
1.8 KiB
TypeScript
50 lines
1.8 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 JSON_USER from "@/demo/user.json";
|
|
|
|
export default function Home() {
|
|
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={JSON_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={JSON_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>
|
|
</>
|
|
);
|
|
}
|