61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import { Module } from "@/interfaces";
|
|
import useExamStore from "@/stores/examStore";
|
|
import { moduleLabels } from "@/utils/moduleUtils";
|
|
import clsx from "clsx";
|
|
import { motion } from "framer-motion";
|
|
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;
|
|
module: Module;
|
|
label?: string;
|
|
exerciseIndex: number;
|
|
totalExercises: number;
|
|
disableTimer?: boolean;
|
|
partLabel?: string;
|
|
showTimer?: boolean;
|
|
}
|
|
|
|
export default function ModuleTitle({
|
|
minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel, showTimer = true
|
|
}: Props) {
|
|
|
|
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: <BsMegaphone className="text-ielts-speaking w-6 h-6" />,
|
|
level: <BsClipboard className="text-ielts-level w-6 h-6" />,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{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>
|
|
else return <p className="text-2xl font-semibold">{line}</p>
|
|
})}</div>}
|
|
<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "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">
|
|
{moduleLabels[module]} exam {label && `- ${label}`}
|
|
</span>
|
|
<span className="text-sm font-semibold self-end">
|
|
Question {exerciseIndex}/{totalExercises}
|
|
</span>
|
|
</div>
|
|
<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|