Exam generation rework, batch user tables, fastapi endpoint switch

src/exams/Navigation/SectionDivider.tsx

@@ -0,0 +1,50 @@
+import Button from "@/components/Low/Button";
+import { Module } from "@/interfaces";
+import { LevelPart, ListeningPart, ReadingPart, SpeakingExercise, UserSolution, WritingExercise } from "@/interfaces/exam";
+import clsx from "clsx";
+import { ReactNode } from "react";
+import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
+
+interface Props {
+    sectionIndex: number;
+    sectionLabel: string;
+    defaultTitle: string;
+    module: Module;
+    section: LevelPart | ReadingPart | ListeningPart | WritingExercise | SpeakingExercise;
+    onNext: () => void;
+}
+
+const PartDivider: React.FC<Props> = ({ sectionIndex, sectionLabel, section, module, defaultTitle, onNext }) => {
+    const iconStyle = "text-white w-6 h-6";
+    const moduleIcon: { [key in Module]: ReactNode } = {
+        reading: <BsBook className={iconStyle} />,
+        listening: <BsHeadphones className={iconStyle} />,
+        writing: <BsPen className={iconStyle} />,
+        speaking: <BsMegaphone className={iconStyle} />,
+        level: <BsClipboard className={iconStyle} />,
+    };
+
+    return (
+        <div className={clsx("flex flex-col h-fit border bg-white rounded-3xl p-12 gap-8", section.intro ? "w-3/6" : "items-center my-auto")}>
+            <div className="flex flex-row gap-4 items-center">
+                <div className={`w-12 h-12 bg-ielts-${module} flex items-center justify-center rounded-lg`}>{moduleIcon[module]}</div>
+                <p className="text-3xl">{section.intro ? `${sectionLabel} ${sectionIndex + 1}` : defaultTitle}</p>
+            </div>
+            {section.intro && section.intro.split('\\n\\n').map((x, index) => <p key={`line-${index}`} className="text-2xl text-clip" dangerouslySetInnerHTML={{ __html: x.replace('that is not correct', 'that is <span class="font-bold"><u>not correct</u></span>') }}></p>)}
+            <div className="flex items-center justify-center mt-4">
+                <button
+                    onClick={() => onNext()}
+                    className={clsx(
+                        "max-w-[200px] self-end w-full text-2xl text-white",
+                        "rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer select-none",
+                        "py-4 px-6",
+                        `bg-ielts-${module} hover:bg-ielts-${module}/70`
+                    )}>
+                    {sectionIndex === 0 ? `Start now` : `Start ${sectionLabel} ${sectionIndex + 1}`}
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default PartDivider;

src/exams/Navigation/SectionNavbar.tsx

@@ -0,0 +1,42 @@
+import { Module } from "@/interfaces";
+import { LevelPart, ListeningPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
+import { Tab, TabGroup, TabList } from "@headlessui/react";
+import clsx from "clsx";
+import React from "react";
+
+interface Props {
+    module: Module;
+    sections: LevelPart[] | ReadingPart[] | ListeningPart[] | WritingExercise[] | SpeakingExercise[];
+    sectionIndex: number;
+    sectionLabel: string;
+    setSectionIndex: (index: number) => void;
+    onClick: (index: number) => void;
+}
+
+const SectionNavbar: React.FC<Props> = ({module, sections, sectionIndex, sectionLabel, setSectionIndex, onClick}) => {
+    return (
+
+        <div className="w-full">
+            <TabGroup className="w-[90%]" selectedIndex={sectionIndex} onChange={setSectionIndex}>
+                <TabList className={`flex space-x-1 rounded-xl bg-ielts-${module}/20 p-1`}>
+                    {sections.map((_, index) =>
+                        <Tab key={index} onClick={() => onClick(index)}
+                            className={({ selected }) =>
+                                clsx(
+                                    `w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-${module}/80`,
+                                    "ring-white ring-opacity-60 focus:outline-none",
+                                    "transition duration-300 ease-in-out hover:bg-white/70",
+                                    selected && "bg-white shadow",
+                                )
+                            }
+                        >{`${sectionLabel} ${index + 1}`}</Tab>
+                    )
+                    }
+                </TabList>
+            </TabGroup>
+        </div>
+
+    );
+}
+
+export default SectionNavbar;