69 lines
3.2 KiB
TypeScript
69 lines
3.2 KiB
TypeScript
import { LevelExam, LevelPart, ReadingExam, ReadingPart } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import { Fragment, useState } from "react";
|
|
import { BsChevronDown, BsChevronUp } from "react-icons/bs";
|
|
|
|
const TextComponent: React.FC<{ part: ReadingPart | LevelPart; exerciseType: string }> = ({ part, exerciseType }) => {
|
|
const numberToLetter = (number: number) => (number + 9).toString(36).toUpperCase();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<h3 className="text-xl font-semibold">{part.text?.title}</h3>
|
|
<div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
|
|
{part.text?.content
|
|
.split(/\n|(\\n)/g)
|
|
.filter((x) => x && x.length > 0 && x !== "\\n")
|
|
.map((line, index) => (
|
|
<Fragment key={index}>
|
|
{exerciseType === "matchSentences" && (
|
|
<div className="flex gap-3 border border-transparent hover:border-mti-purple-light rounded-lg transition ease-in-out duration-300 p-2 px-3 cursor-pointer">
|
|
<span className="font-bold text-mti-purple-dark">{numberToLetter(index + 1)}</span>
|
|
<p>{line}</p>
|
|
</div>
|
|
)}
|
|
{exerciseType !== "matchSentences" && <p key={index}>{line}</p>}
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface Props {
|
|
exam: ReadingExam | LevelExam;
|
|
partIndex: number;
|
|
exerciseType: string;
|
|
isTextMinimized: boolean;
|
|
setIsTextMinimized: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
const ReadingPassage: React.FC<Props> = ({exam, partIndex, exerciseType, isTextMinimized, setIsTextMinimized}) => {
|
|
return (
|
|
<div className={clsx("flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl mt-4 relative", isTextMinimized ? "p-2 px-8" : "py-8 px-16")}>
|
|
<button
|
|
data-tip={isTextMinimized ? "Maximise" : "Minimize"}
|
|
className={clsx("absolute right-8 tooltip", isTextMinimized ? "top-1/2 -translate-y-1/2" : "top-8")}
|
|
onClick={() => setIsTextMinimized((prev) => !prev)}>
|
|
{isTextMinimized ? (
|
|
<BsChevronDown className="text-mti-purple-dark text-lg" />
|
|
) : (
|
|
<BsChevronUp className="text-mti-purple-dark text-lg" />
|
|
)}
|
|
</button>
|
|
{!isTextMinimized && (
|
|
<>
|
|
<div className="flex flex-col w-full gap-2">
|
|
<h4 className="text-xl font-semibold">
|
|
Please read the following excerpt attentively, you will then be asked questions about the text you've read.
|
|
</h4>
|
|
<span className="text-base">You will be allowed to read the text while doing the exercises</span>
|
|
</div>
|
|
<TextComponent part={exam.parts[partIndex]} exerciseType={exerciseType} />
|
|
</>
|
|
)}
|
|
{isTextMinimized && <span className="font-semibold">Reading Passage</span>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ReadingPassage;
|