Added a timer that is shown in each module

src/exams/Writing.tsx

@@ -11,6 +11,16 @@ interface Props {
 export default function Writing({exam}: Props) {
 	const [inputText, setInputText] = useState("");
 	const [isSubmitEnabled, setIsSubmitEnabled] = 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]);
 
 	useEffect(() => {
 		const words = inputText.split(" ").filter((x) => x !== "");
@@ -27,7 +37,14 @@ export default function Writing({exam}: Props) {
 	}, [inputText, exam]);
 
 	return (
-		<div className="h-full w-full flex flex-col items-center justify-center gap-8">
+		<div className="h-full w-full flex flex-col items-center justify-center gap-8 relative">
+			{timer && (
+				<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-writing border-2 p-2 rounded-xl bg-ielts-writing-transparent text-white">
+					{Math.floor(timer / 60) < 10 ? "0" : ""}
+					{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
+					{timer % 60}
+				</div>
+			)}
 			<div className="flex flex-col max-w-2xl gap-2">
 				<span>{exam.text.info}</span>
 				<span className="font-bold ml-8">