Part intro's, modals between parts and some fixes

src/exams/Level/PartDivider.tsx

@@ -0,0 +1,37 @@
+import Button from "@/components/Low/Button";
+import { Module } from "@/interfaces";
+import { LevelPart, UserSolution } from "@/interfaces/exam";
+import { ReactNode } from "react";
+import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
+
+interface Props {
+    partIndex: number;
+    part: LevelPart // for now
+    onNext: () => void;
+}
+
+const PartDivider: React.FC<Props> = ({ partIndex, part, onNext }) => {
+
+    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-white w-6 h-6" />,
+    };
+
+    return (
+        <div className="flex flex-col w-3/6 h-fit border bg-white rounded-3xl p-12 gap-8">
+            {/** only level for now */}
+            <div className="flex flex-row gap-4 items-center"><div className="w-12 h-12 bg-ielts-level flex items-center justify-center rounded-lg">{moduleIcon["level"]}</div><p className="text-3xl">{`Part ${partIndex + 1}`}</p></div>
+            {part.intro!.split('\\n\\n').map((x, index) => <p key={`line-${index}`} className="text-2xl text-clip">{x}</p>)}
+            <div className="flex items-center justify-center mt-4">
+                <Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full text-2xl">
+                    {partIndex === 0 ? `Start now`: `Start Part ${partIndex + 1}`}
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default PartDivider;