192 lines
8.8 KiB
TypeScript
192 lines
8.8 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Icon from "@mdi/react";
|
|
import {mdiAccountVoice, mdiArrowLeft, mdiArrowRight, mdiBookOpen, mdiHeadphones, mdiPen} from "@mdi/js";
|
|
import {useEffect, useState} from "react";
|
|
import {Module} from "@/interfaces";
|
|
import clsx from "clsx";
|
|
import {useRouter} from "next/router";
|
|
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
|
|
import ProfileLevel from "@/components/ProfileLevel";
|
|
import {User} from "@/interfaces/user";
|
|
import useExamStore from "@/stores/examStore";
|
|
import ProgressBar from "@/components/Low/ProgressBar";
|
|
import {BsBook, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
|
|
import {averageScore, formatModuleTotalStats, totalExams, totalExamsByModule} from "@/utils/stats";
|
|
import useStats from "@/hooks/useStats";
|
|
import Button from "@/components/Low/Button";
|
|
|
|
interface Props {
|
|
user: User;
|
|
onStart: (modules: Module[]) => void;
|
|
}
|
|
|
|
export default function Selection({user, onStart}: Props) {
|
|
const [selectedModules, setSelectedModules] = useState<Module[]>([]);
|
|
const {stats} = useStats(user?.id);
|
|
|
|
const calculateAverageLevel = () => {
|
|
return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4;
|
|
};
|
|
|
|
const router = useRouter();
|
|
|
|
const toggleModule = (module: Module) => {
|
|
const modules = selectedModules.filter((x) => x !== module);
|
|
setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="w-full h-full relative flex flex-col gap-16">
|
|
<section className="w-full flex gap-8">
|
|
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
|
|
<div className="flex flex-col gap-4 py-4 w-full">
|
|
<div className="flex justify-between w-full gap-8">
|
|
<div className="flex flex-col gap-2 py-2">
|
|
<h1 className="font-bold text-4xl">{user.name}</h1>
|
|
<h6 className="font-normal text-base text-mti-gray-taupe capitalize">{user.type}</h6>
|
|
</div>
|
|
<ProgressBar
|
|
label={`Level ${calculateAverageLevel().toFixed(1)}`}
|
|
percentage={Math.round((calculateAverageLevel() * 100) / 9)}
|
|
color="blue"
|
|
className="max-w-xs w-32 self-end h-10"
|
|
/>
|
|
</div>
|
|
<ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-lg" />
|
|
<div className="flex justify-between w-full mt-8">
|
|
<div className="flex gap-4 items-center">
|
|
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
|
|
<BsBook className="text-ielts-reading w-8 h-8" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-xl">{totalExamsByModule(stats, "reading")}</span>
|
|
<span className="font-normal text-base text-mti-gray-dim">Reading</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
|
|
<BsHeadphones className="text-ielts-listening w-8 h-8" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-xl">{totalExamsByModule(stats, "listening")}</span>
|
|
<span className="font-normal text-base text-mti-gray-dim">Listening</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
|
|
<BsPen className="text-ielts-writing w-8 h-8" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-xl">{totalExamsByModule(stats, "writing")}</span>
|
|
<span className="font-normal text-base text-mti-gray-dim">Writing</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
|
|
<BsMegaphone className="text-ielts-speaking w-8 h-8" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-xl">{totalExamsByModule(stats, "speaking")}</span>
|
|
<span className="font-normal text-base text-mti-gray-dim">Speaking</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="flex flex-col gap-3">
|
|
<span className="font-bold text-lg">About Exams</span>
|
|
<span className="text-mti-gray-taupe">
|
|
This comprehensive test will assess your proficiency in reading, listening, writing, and speaking English. Be prepared to dive
|
|
into a variety of interesting and challenging topics while showcasing your ability to communicate effectively in English.
|
|
Master the vocabulary, grammar, and interpretation skills required to succeed in this high-level exam. Are you ready to
|
|
demonstrate your mastery of the English language to the world?
|
|
</span>
|
|
</section>
|
|
<section className="w-full flex justify-between gap-8 mt-8">
|
|
<div
|
|
className={clsx(
|
|
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
|
|
selectedModules.includes("reading") ? "border-mti-green-light" : "border-mti-gray-platinum",
|
|
)}>
|
|
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-0 -translate-y-1/2">
|
|
<BsBook className="text-white w-7 h-7" />
|
|
</div>
|
|
<span className="font-semibold">Reading:</span>
|
|
<p className="text-center text-xs">
|
|
Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
|
|
</p>
|
|
<Button
|
|
color="green"
|
|
variant={selectedModules.includes("reading") ? "solid" : "outline"}
|
|
className="mt-4 px-12"
|
|
onClick={() => toggleModule("reading")}>
|
|
Select exam
|
|
</Button>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
|
|
selectedModules.includes("listening") ? "border-mti-green-light" : "border-mti-gray-platinum",
|
|
)}>
|
|
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-0 -translate-y-1/2">
|
|
<BsHeadphones className="text-white w-7 h-7" />
|
|
</div>
|
|
<span className="font-semibold">Listening:</span>
|
|
<p className="text-center text-xs">
|
|
Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
|
|
</p>
|
|
<Button
|
|
color="green"
|
|
variant={selectedModules.includes("listening") ? "solid" : "outline"}
|
|
className="mt-4 px-12"
|
|
onClick={() => toggleModule("listening")}>
|
|
Select exam
|
|
</Button>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
|
|
selectedModules.includes("writing") ? "border-mti-green-light" : "border-mti-gray-platinum",
|
|
)}>
|
|
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-0 -translate-y-1/2">
|
|
<BsPen className="text-white w-7 h-7" />
|
|
</div>
|
|
<span className="font-semibold">Writing:</span>
|
|
<p className="text-center text-xs">
|
|
Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
|
|
</p>
|
|
<Button
|
|
color="green"
|
|
variant={selectedModules.includes("writing") ? "solid" : "outline"}
|
|
className="mt-4 px-12"
|
|
onClick={() => toggleModule("writing")}>
|
|
Select exam
|
|
</Button>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
|
|
selectedModules.includes("speaking") ? "border-mti-green-light" : "border-mti-gray-platinum",
|
|
)}>
|
|
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-0 -translate-y-1/2">
|
|
<BsMegaphone className="text-white w-7 h-7" />
|
|
</div>
|
|
<span className="font-semibold">Speaking:</span>
|
|
<p className="text-center text-xs">
|
|
You'll have access to interactive dialogs, pronunciation exercises and speech recordings.
|
|
</p>
|
|
<Button
|
|
color="green"
|
|
variant={selectedModules.includes("speaking") ? "solid" : "outline"}
|
|
className="mt-4 px-12"
|
|
onClick={() => toggleModule("speaking")}>
|
|
Select exam
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|