Part intro's, modals between parts and some fixes

src/components/Medium/ModuleTitle.tsx

@@ -7,6 +7,7 @@ import { ReactNode, useEffect, useState } from "react";
 import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch } from "react-icons/bs";
 import ProgressBar from "../Low/ProgressBar";
 import TimerEndedModal from "../TimerEndedModal";
+import Timer from "./Timer";
 
 interface Props {
 	minTimer: number;
@@ -16,37 +17,12 @@ interface Props {
 	totalExercises: number;
 	disableTimer?: boolean;
 	partLabel?: string;
+	showTimer?: boolean;
 }
 
 export default function ModuleTitle({ 
-	minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel
+	minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel, showTimer = true
 }: Props) {
-	const [timer, setTimer] = useState(minTimer * 60);
-	const [showModal, setShowModal] = useState(false);
-	const [warningMode, setWarningMode] = useState(false);
-
-	const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
-	const { timeSpent } = useExamStore((state) => state);
-
-	useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);
-
-	useEffect(() => {
-		if (!disableTimer) {
-			const timerInterval = setInterval(() => setTimer((prev) => prev - 1), 1000);
-
-			return () => {
-				clearInterval(timerInterval);
-			};
-		}
-	}, [disableTimer, minTimer]);
-
-	useEffect(() => {
-		if (timer <= 0) setShowModal(true);
-	}, [timer]);
-
-	useEffect(() => {
-		if (timer < 300 && !warningMode) setWarningMode(true);
-	}, [timer, warningMode]);
 
 	const moduleIcon: { [key in Module]: ReactNode } = {
 		reading: <BsBook className="text-ielts-reading w-6 h-6" />,
@@ -58,37 +34,7 @@ export default function ModuleTitle({
 
 	return (
 		<>
-			<TimerEndedModal
-				isOpen={showModal}
-				onClose={() => {
-					setHasExamEnded(true);
-					setShowModal(false);
-				}}
-			/>
-			<motion.div
-				className={clsx(
-					"absolute top-4 right-6 bg-mti-gray-seasalt px-4 py-3 flex items-center gap-2 rounded-full text-mti-gray-davy",
-					warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
-				)}
-				initial={{ scale: warningMode && !disableTimer ? 0.8 : 1 }}
-				animate={{ scale: warningMode && !disableTimer ? 1.1 : 1 }}
-				transition={{ repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut" }}>
-				<BsStopwatch className="w-6 h-6" />
-				<span className="text-base font-semibold w-12">
-					{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>
-			</motion.div>
+			{showTimer && <Timer minTimer={minTimer} disableTimer={disableTimer} />}
 			<div className="w-full">
 				{partLabel && <div className="text-3xl space-y-4">{partLabel.split('\n\n').map((line, index) => {
 					if(index == 0) return <p className="font-bold">{line}</p>