Implemented the Reading and Listening initial screens according to the new designs, creating new components as needed

src/components/Medium/ModuleTitle.tsx

@@ -0,0 +1,64 @@
+import {Module} from "@/interfaces";
+import {ReactNode, useEffect, useState} from "react";
+import {BsBook, BsHeadphones, BsPen, BsStopwatch} from "react-icons/bs";
+import ProgressBar from "../Low/ProgressBar";
+
+interface Props {
+	minTimer: number;
+	module: Module;
+	exerciseIndex: number;
+	totalExercises: number;
+}
+
+export default function ModuleTitle({minTimer, module, exerciseIndex, totalExercises}: Props) {
+	const [timer, setTimer] = useState(minTimer * 60);
+
+	useEffect(() => {
+		const timerInterval = setInterval(() => setTimer((prev) => prev - 1), 1000);
+
+		return () => {
+			clearInterval(timerInterval);
+		};
+	}, [minTimer]);
+
+	const moduleIcon: {[key in Module]: ReactNode} = {
+		reading: <BsBook className="text-ielts-reading w-6 h-6" />,
+		listening: <BsHeadphones className="text-ielts-listening w-6 h-6" />,
+		writing: <BsPen className="text-ielts-writing w-6 h-6" />,
+		speaking: <BsBook className="text-ielts-speaking w-6 h-6" />,
+	};
+
+	return (
+		<>
+			<div className="absolute top-4 right-6 bg-mti-gray-seasalt px-3 py-2 flex items-center gap-2 rounded-full text-mti-gray-davy">
+				<BsStopwatch className="w-4 h-4" />
+				<span className="text-sm font-semibold w-11">
+					{timer > 0 && (
+						<>
+							{Math.floor(timer / 60)
+								.toString(10)
+								.padStart(2, "0")}
+							:
+							{Math.floor(timer % 60)
+								.toString(10)
+								.padStart(2, "0")}
+						</>
+					)}
+					{timer <= 0 && <>00:00</>}
+				</span>
+			</div>
+			<div className="flex gap-6 w-full h-fit items-center mt-5">
+				<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg">{moduleIcon[module]}</div>
+				<div className="flex flex-col gap-3 w-full">
+					<div className="w-full flex justify-between">
+						<span className="text-base font-semibold">Reading exam N.19</span>
+						<span className="text-xs font-normal self-end text-mti-gray-davy">
+							Question {exerciseIndex}/{totalExercises}
+						</span>
+					</div>
+					<ProgressBar color={module} label="" percentage={((exerciseIndex - 1) * 100) / totalExercises} className="h-2 w-full" />
+				</div>
+			</div>
+		</>
+	);
+}