Added a timer that is shown in each module

src/exams/Reading.tsx

@@ -1,5 +1,5 @@
 import {ReadingExam} from "@/interfaces/exam";
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import Icon from "@mdi/react";
 import {mdiArrowRight, mdiNotebook} from "@mdi/js";
 import clsx from "clsx";
@@ -72,6 +72,16 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
 export default function Reading({exam, onFinish}: Props) {
 	const [exerciseIndex, setExerciseIndex] = useState(-1);
 	const [showTextModal, setShowTextModal] = useState(false);
+	const [timer, setTimer] = useState<number>();
+
+	useEffect(() => {
+		setTimer(exam.minTimer * 60);
+		const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
+
+		return () => {
+			clearInterval(timerInterval);
+		};
+	}, [exam.minTimer]);
 
 	const nextExercise = () => {
 		if (exerciseIndex + 1 < exam.exercises.length) {
@@ -112,6 +122,13 @@ export default function Reading({exam, onFinish}: Props) {
 		<>
 			<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
 			<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
+				{timer && (
+					<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-reading border-2 p-2 rounded-xl bg-ielts-reading-transparent text-white">
+						{Math.floor(timer / 60) < 10 ? "0" : ""}
+						{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
+						{timer % 60}
+					</div>
+				)}
 				{exerciseIndex === -1 && renderText()}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&