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

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>
 	);