Exam generation rework, batch user tables, fastapi endpoint switch

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;