Updated the selection page

src/exams/Selection.tsx

@@ -10,7 +10,7 @@ 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 {BsBook, BsCheckCircle, 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";
@@ -28,8 +28,6 @@ export default function Selection({user, onStart}: Props) {
 		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]));
@@ -105,8 +103,9 @@ export default function Selection({user, onStart}: Props) {
 				</section>
 				<section className="w-full flex justify-between gap-8 mt-8">
 					<div
+						onClick={() => toggleModule("reading")}
 						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",
+							"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 cursor-pointer",
 							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">
@@ -116,17 +115,13 @@ export default function Selection({user, onStart}: Props) {
 						<p className="text-center text-xs">
 							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
 						</p>
-						<Button
+						{!selectedModules.includes("reading") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
-							color="green"
+						{selectedModules.includes("reading") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
-							variant={selectedModules.includes("reading") ? "solid" : "outline"}
-							className="mt-4 px-12"
-							onClick={() => toggleModule("reading")}>
-							Select exam
-						</Button>
 					</div>
 					<div
+						onClick={() => toggleModule("listening")}
 						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",
+							"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 cursor-pointer",
 							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">
@@ -136,17 +131,13 @@ export default function Selection({user, onStart}: Props) {
 						<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
+						{!selectedModules.includes("listening") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
-							color="green"
+						{selectedModules.includes("listening") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
-							variant={selectedModules.includes("listening") ? "solid" : "outline"}
-							className="mt-4 px-12"
-							onClick={() => toggleModule("listening")}>
-							Select exam
-						</Button>
 					</div>
 					<div
+						onClick={() => toggleModule("writing")}
 						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",
+							"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 cursor-pointer",
 							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">
@@ -156,17 +147,13 @@ export default function Selection({user, onStart}: Props) {
 						<p className="text-center text-xs">
 							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
 						</p>
-						<Button
+						{!selectedModules.includes("writing") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
-							color="green"
+						{selectedModules.includes("writing") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
-							variant={selectedModules.includes("writing") ? "solid" : "outline"}
-							className="mt-4 px-12"
-							onClick={() => toggleModule("writing")}>
-							Select exam
-						</Button>
 					</div>
 					<div
+						onClick={() => toggleModule("speaking")}
 						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",
+							"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 cursor-pointer",
 							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">
@@ -176,15 +163,17 @@ export default function Selection({user, onStart}: Props) {
 						<p className="text-center text-xs">
 							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
 						</p>
-						<Button
+						{!selectedModules.includes("speaking") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
-							color="green"
+						{selectedModules.includes("speaking") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
-							variant={selectedModules.includes("speaking") ? "solid" : "outline"}
-							className="mt-4 px-12"
-							onClick={() => toggleModule("speaking")}>
-							Select exam
-						</Button>
 					</div>
 				</section>
+				<Button
+					onClick={() => onStart(selectedModules)}
+					color="green"
+					className="px-12 w-full max-w-xs self-end"
+					disabled={selectedModules.length === 0}>
+					Start Exam
+				</Button>
 			</div>
 		</>
 	);

src/pages/test.tsx

@@ -39,6 +39,7 @@ export default function Page() {
 	const {user} = useUser({redirectTo: "/login"});
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
+	const [mediaBlob, setMediaBlob] = useState<string>();
 
 	useEffect(() => {
 		let recordingInterval: NodeJS.Timer | undefined = undefined;
@@ -73,6 +74,7 @@ export default function Page() {
 						<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12 flex flex-col gap-12">
 							<ReactMediaRecorder
 								audio
+								onStop={(blob) => setMediaBlob(blob)}
 								render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (
 									<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
 										<p className="text-base font-normal">Record your answer:</p>