Separated the ProfileLevel into multiple components and made a Card one

src/components/LevelLabel.tsx

@@ -0,0 +1,12 @@
+import {levelCalculator} from "@/resources/level";
+import clsx from "clsx";
+
+interface Props {
+	experience: number;
+	className?: string;
+}
+
+export default function LevelLabel({experience, className}: Props) {
+	const {label} = levelCalculator(experience);
+	return <span className={clsx("text-xl font-semibold text-success", className)}>{label}</span>;
+}

src/components/LevelProgressBar.tsx

@@ -0,0 +1,25 @@
+import {levelCalculator} from "@/resources/level";
+import clsx from "clsx";
+
+interface Props {
+	experience: number;
+	className?: string;
+	progressBarWidth?: string;
+}
+
+export default function LevelProgressBar({experience, className, progressBarWidth = "w-64"}: Props) {
+	const levelResult = levelCalculator(experience);
+
+	return (
+		<div className={clsx("flex flex-col items-center", className)}>
+			<div className="flex gap-3 items-center">
+				<span>Lvl. {levelResult.currentLevel}</span>
+				<progress className={clsx("progress progress-success", progressBarWidth)} value={levelResult.percentage} max="100" />
+				<span>Lvl. {levelResult.nextLevel}</span>
+			</div>
+			<span className="text-xs">
+				{experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")}
+			</span>
+		</div>
+	);
+}

src/components/Navbar.tsx

@@ -1,9 +1,17 @@
+import Link from "next/link";
+
+interface Props {
+	profilePicture: string;
+}
+
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar() {
+export default function Navbar({profilePicture}: Props) {
 	return (
 		<div className="navbar bg-neutral-100 drop-shadow-md text-black">
 			<div className="flex-1">
-				<a className="btn btn-ghost normal-case text-xl">IELTS GPT</a>
+				<Link className="btn btn-ghost normal-case text-xl" href="/">
+					IELTS GPT
+				</Link>
 			</div>
 			<div className="flex-none gap-2">
 				<div className="form-control">
@@ -12,7 +20,7 @@ export default function Navbar() {
 				<div className="dropdown dropdown-end">
 					<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
 						<div className="w-10 rounded-full">
-							<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="Profile picture" />
+							<img src={profilePicture} alt="Profile picture" />
 						</div>
 					</label>
 					<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">

src/components/ProfileCard.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable @next/next/no-img-element */
+import {User} from "@/interfaces/user";
+import clsx from "clsx";
+import LevelLabel from "./LevelLabel";
+import LevelProgressBar from "./LevelProgressBar";
+
+interface Props {
+	user: User;
+	className: string;
+}
+
+export default function ProfileCard({user, className}: Props) {
+	return (
+		<div className={clsx("bg-white drop-shadow-xl p-8 rounded-xl w-full flex flex-col gap-6", className)}>
+			<div className="flex w-full items-center gap-8">
+				<div className="w-24 rounded-full border-4 border-white drop-shadow-xl">
+					<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
+				</div>
+				<div className="flex flex-col justify-center">
+					<span className="text-neutral-600 font-bold text-2xl">
+						{user.name.first} {user.name.last}
+					</span>
+					<LevelLabel experience={user.experience} />
+				</div>
+			</div>
+			<LevelProgressBar experience={user.experience} progressBarWidth="w-96" />
+		</div>
+	);
+}

src/components/ProfileLevel.tsx

@@ -2,6 +2,8 @@
 import {User} from "@/interfaces/user";
 import {levelCalculator} from "@/resources/level";
 import clsx from "clsx";
+import LevelLabel from "./LevelLabel";
+import LevelProgressBar from "./LevelProgressBar";
 
 interface Props {
 	user: User;
@@ -16,18 +18,9 @@ export default function ProfileLevel({user, className}: Props) {
 			<div className="w-24 rounded-full">
 				<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
 			</div>
-			<div className="flex flex-col gap-4 items-center">
+			<div className="flex flex-col gap-1 items-center">
-				<span className="text-xl font-semibold text-success">{levelResult.label}</span>
+				<LevelLabel experience={user.experience} />
-				<div className="flex flex-col items-center">
+				<LevelProgressBar experience={user.experience} className="text-black" />
-					<div className="flex gap-3 items-center">
-						<span>Lvl. {levelResult.currentLevel}</span>
-						<progress className="progress progress-success w-64" value={levelResult.percentage} max="100" />
-						<span>Lvl. {levelResult.nextLevel}</span>
-					</div>
-					<span className="text-xs">
-						{user.experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")}
-					</span>
-				</div>
 			</div>
 		</div>
 	);

src/demo/user.json

@@ -0,0 +1,10 @@
+{
+  "username": "tiago.ribeiro",
+  "name": {
+    "first": "Tiago",
+    "last": "Ribeiro"
+  },
+  "profilePicture": "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
+  "id": "cb20bf1c-188b-409c-acc1-ee59295684f4",
+  "experience": 561
+}

src/interfaces/user.ts

@@ -1,4 +1,11 @@
 export interface User {
+	username: string;
+	name: Name;
 	profilePicture: string;
+	id: string;
 	experience: number;
 }
+interface Name {
+	first: string;
+	last: string;
+}

src/pages/exam.tsx

@@ -10,6 +10,9 @@ import {useRouter} from "next/router";
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import ProfileLevel from "@/components/ProfileLevel";
 
+// TODO: Remove this import
+import JSON_USER from "@/demo/user.json";
+
 export default function Home() {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const router = useRouter();
@@ -28,14 +31,11 @@ export default function Home() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<main className="w-full h-screen flex flex-col items-center bg-white text-black">
-				<Navbar />
+				<Navbar profilePicture={JSON_USER.profilePicture} />
 				<div className="w-full h-full relative">
 					<section className="h-full w-full flex flex-col items-center justify-center">
 						{/* //TODO: Change this section to work with the user account */}
-						<ProfileLevel
+						<ProfileLevel user={JSON_USER} className="h-1/2" />
-							user={{profilePicture: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg", experience: 43760}}
-							className="h-1/2"
-						/>
 						<div className="h-1/2 flex flex-col">
 							<div className="h-1/2 flex gap-8">
 								<div

src/pages/index.tsx

@@ -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>
+				<title>IELTS GPT | Muscat Training Institute</title>
-				<meta name="description" content="Generated by create next app" />
+				<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">
+			<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
-				<Navbar />
+				<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">
+					<section className="h-full w-full flex items-center p-8 gap-12 justify-center">
-						<UserResultChart results={JSON_RESULTS} resultKey="score" label="User results" className="w-5/6" />
+						<section className="w-1/2 h-full flex items-center">
-						<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-5/6" />
+							<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>