Navigation rework, added prompt edit to components that were missing

2024-11-25 16:50:46 +00:00
parent e9b7bd14cc
commit 114da173be
105 changed files with 3761 additions and 3728 deletions
--- a/src/exams/components/ReadingPassage.tsx
+++ b/src/exams/components/ReadingPassage.tsx
@@ -0,0 +1,68 @@
+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&apos;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;