Updated part of the Selection screen to the new design
This commit is contained in:
Tiago Ribeiro
@@ -9,6 +9,10 @@ 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";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
@@ -17,6 +21,11 @@ interface Props {
|
||||
|
||||
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();
|
||||
|
||||
@@ -27,82 +36,72 @@ export default function Selection({user, onStart}: Props) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-full relative">
|
||||
<section className="h-full w-full flex flex-col items-center justify-center gap-8">
|
||||
<ProfileLevel user={user} className="h-1/2" />
|
||||
<div className="h-1/2 flex flex-col gap-8">
|
||||
<div className="h-1/2 items-center flex flex-col lg:flex-row gap-8">
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => toggleModule("reading")}
|
||||
className={clsx(
|
||||
"flex flex-col gap-2 items-center justify-center",
|
||||
"border-ielts-reading hover:bg-ielts-reading text-white",
|
||||
"border-2 rounded-xl p-4 h-fit w-48 cursor-pointer",
|
||||
selectedModules.includes("reading") ? "bg-ielts-reading " : "bg-ielts-reading-transparent ",
|
||||
)}>
|
||||
<Icon path={mdiBookOpen} color="white" size={3} />
|
||||
<span>Reading</span>
|
||||
</div>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => toggleModule("listening")}
|
||||
className={clsx(
|
||||
"flex flex-col gap-2 items-center justify-center",
|
||||
"border-ielts-listening hover:bg-ielts-listening text-white",
|
||||
"border-2 rounded-xl p-4 h-fit w-48 cursor-pointer",
|
||||
selectedModules.includes("listening") ? "bg-ielts-listening " : "bg-ielts-listening-transparent ",
|
||||
)}>
|
||||
<Icon path={mdiHeadphones} color="white" size={3} />
|
||||
<span>Listening</span>
|
||||
</div>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => toggleModule("writing")}
|
||||
className={clsx(
|
||||
"flex flex-col gap-2 items-center justify-center",
|
||||
"border-ielts-writing hover:bg-ielts-writing text-white",
|
||||
"border-2 rounded-xl p-4 h-fit w-48 cursor-pointer",
|
||||
selectedModules.includes("writing") ? "bg-ielts-writing " : "bg-ielts-writing-transparent ",
|
||||
)}>
|
||||
<Icon path={mdiPen} color="white" size={3} />
|
||||
<span>Writing</span>
|
||||
</div>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => toggleModule("speaking")}
|
||||
className={clsx(
|
||||
"flex flex-col gap-2 items-center justify-center",
|
||||
"border-ielts-speaking hover:bg-ielts-speaking text-white",
|
||||
"border-2 rounded-xl p-4 h-fit w-48 cursor-pointer",
|
||||
selectedModules.includes("speaking") ? "bg-ielts-speaking " : "bg-ielts-speaking-transparent ",
|
||||
)}>
|
||||
<Icon path={mdiAccountVoice} color="white" size={3} />
|
||||
<span>Speaking</span>
|
||||
<div className="w-full h-full relative flex flex-col gap-12">
|
||||
<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>
|
||||
<div className="w-full flex flex-col gap-4 md:flex-row justify-between">
|
||||
<button onClick={() => router.push("/")} className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)}>
|
||||
<div className="absolute left-4">
|
||||
<Icon path={mdiArrowLeft} color="white" size={1} />
|
||||
<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>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
|
||||
onClick={() => onStart(selectedModules)}>
|
||||
Start
|
||||
<div className="absolute right-4">
|
||||
<Icon path={mdiArrowRight} color="white" size={1} />
|
||||
<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>
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user