devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separated the ProfileLevel into multiple components and made a Card one

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-03-09 15:56:51 +00:00
parent aa869dd2ce
commit be7665fab8
9 changed files with 124 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/index.tsx
View File

@@ -1,39 +1,46 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Image from "next/image";
import {Inter} from "@next/font/google";
import styles from "@/styles/Home.module.css";
import UserResultChart from "@/components/UserResultChart";
import JSON_RESULTS from "@/demo/user_results.json";
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";
const inter = Inter({subsets: ["latin"]});
// 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>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<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-white">
<Navbar />
<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 right-4 absolute", infoButtonStyle)}>
<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 grid grid-cols-2 place-items-center">
<UserResultChart results={JSON_RESULTS} resultKey="score" label="User results" className="w-5/6" />
<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-5/6" />
<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>