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

src/components/High/Layout.tsx

@@ -1,19 +1,24 @@
 import {User} from "@/interfaces/user";
+import clsx from "clsx";
 import Navbar from "../Navbar";
 import Sidebar from "../Sidebar";
 
 interface Props {
 	user: User;
 	children: React.ReactNode;
+	className?: string;
 }
 
-export default function Layout({user, children}: Props) {
+export default function Layout({user, children, className}: Props) {
 	return (
-		<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke">
+		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
 			<Navbar user={user} />
 			<div className="h-full w-full flex py-4 pb-8 gap-2">
 				<Sidebar path={window.location.pathname} />
-				<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12 flex flex-col gap-12">{children}</div>
+				<div
+					className={clsx("w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative", className)}>
+					{children}
+				</div>
 			</div>
 		</main>
 	);

src/components/Low/AudioPlayer.tsx

@@ -0,0 +1,87 @@
+import {Module} from "@/interfaces";
+import {formatTimeInMinutes} from "@/utils/string";
+import clsx from "clsx";
+import {useEffect, useRef, useState} from "react";
+import {BsPauseFill, BsPlayFill} from "react-icons/bs";
+import ProgressBar from "./ProgressBar";
+
+interface Props {
+	src: string;
+	color: "blue" | "orange" | "green" | Module;
+	autoPlay?: boolean;
+	disabled?: boolean;
+	onEnd?: () => void;
+}
+
+export default function AudioPlayer({src, color, autoPlay = false, disabled = false, onEnd}: Props) {
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [duration, setDuration] = useState(0);
+	const [currentTime, setCurrentTime] = useState(0);
+
+	const audioPlayerRef = useRef<HTMLAudioElement | null>(null);
+
+	useEffect(() => {
+		if (audioPlayerRef && audioPlayerRef.current) {
+			const seconds = Math.floor(audioPlayerRef.current.duration);
+			setDuration(seconds);
+		}
+	}, [audioPlayerRef?.current?.readyState]);
+
+	useEffect(() => {
+		let playingInterval: NodeJS.Timer | undefined = undefined;
+		if (isPlaying) {
+			playingInterval = setInterval(() => setCurrentTime((prev) => prev + 1), 1000);
+		} else if (playingInterval) {
+			clearInterval(playingInterval);
+		}
+
+		return () => {
+			if (playingInterval) clearInterval(playingInterval);
+		};
+	}, [isPlaying]);
+
+	const togglePlayPause = () => {
+		const prevValue = isPlaying;
+		setIsPlaying(!prevValue);
+		if (!prevValue) {
+			audioPlayerRef?.current?.play();
+		} else {
+			audioPlayerRef?.current?.pause();
+		}
+	};
+
+	return (
+		<div className="w-full h-fit flex gap-4 items-center mt-2">
+			{isPlaying && (
+				<BsPauseFill
+					className={clsx("text-mti-gray-cool cursor-pointer w-5 h-5", disabled && "opacity-60 cursor-not-allowed")}
+					onClick={disabled ? undefined : togglePlayPause}
+				/>
+			)}
+			{!isPlaying && (
+				<BsPlayFill
+					className={clsx("text-mti-gray-cool cursor-pointer w-5 h-5", disabled && "opacity-60 cursor-not-allowed")}
+					onClick={disabled ? undefined : togglePlayPause}
+				/>
+			)}
+			<audio
+				src={src}
+				autoPlay={autoPlay}
+				ref={audioPlayerRef}
+				preload="metadata"
+				onEnded={() => {
+					setIsPlaying(false);
+					setCurrentTime(0);
+					if (onEnd) onEnd();
+				}}
+			/>
+			<div className="flex flex-col gap-2 w-full relative">
+				<div className="absolute w-full flex justify-between -top-5 text-xs px-1">
+					<span>{formatTimeInMinutes(currentTime)}</span>
+					<span>{formatTimeInMinutes(duration)}</span>
+				</div>
+				<ProgressBar label="" color={color} useColor percentage={(currentTime * 100) / duration} className="h-3 w-full" />
+			</div>
+		</div>
+	);
+}

src/components/Low/ProgressBar.tsx

@@ -1,22 +1,37 @@
+import {Module} from "@/interfaces";
 import clsx from "clsx";
 
 interface Props {
 	label: string;
 	percentage: number;
-	color: "blue" | "orange" | "green";
+	color: "blue" | "orange" | "green" | Module;
+	useColor?: boolean;
 	className?: string;
 }
 
-export default function ProgressBar({label, percentage, color, className}: Props) {
+export default function ProgressBar({label, percentage, color, useColor = false, className}: Props) {
 	const progressColorClass: {[key in typeof color]: string} = {
 		blue: "bg-mti-blue-light",
 		orange: "bg-mti-orange-light",
 		green: "bg-mti-green-light",
+		reading: "bg-ielts-reading",
+		listening: "bg-ielts-listening",
+		writing: "bg-ielts-writing",
+		speaking: "bg-ielts-speaking",
 	};
 
 	return (
-		<div className={clsx("relative rounded-full bg-mti-gray-anti-flash overflow-hidden flex items-center justify-center", className)}>
-			<div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", progressColorClass[color])} />
+		<div
+			className={clsx(
+				"relative rounded-full overflow-hidden flex items-center justify-center",
+				className,
+				!useColor ? "bg-mti-gray-anti-flash" : progressColorClass[color],
+				useColor && "bg-opacity-20",
+			)}>
+			<div
+				style={{width: `${percentage}%`}}
+				className={clsx("absolute transition-all duration-300 ease-in-out top-0 left-0 h-full overflow-hidden", progressColorClass[color])}
+			/>
 			<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
 		</div>
 	);

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>
+		</>
+	);
+}