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

Completed the rest of the Selection screen to the new design

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-13 16:24:01 +01:00
parent b41ee8e2ad
commit efaa32cd68
3 changed files with 103 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/exams/Selection.tsx
View File

@@ -13,6 +13,7 @@ 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;
@@ -36,7 +37,7 @@ export default function Selection({user, onStart}: Props) {
return (
<>
<div className="w-full h-full relative flex flex-col gap-12">
<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">
@@ -102,6 +103,88 @@ export default function Selection({user, onStart}: Props) {
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&apos;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>
</>
);