Changed approach on available type selection

src/pages/(generation)/ReadingGeneration.tsx

@@ -26,16 +26,21 @@ import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
+const availableTypes = [
+  { type: "fillBlanks", label: "Fill the Blanks" },
+  { type: "trueFalse", label: "True or False" },
+  { type: "writeBlanks", label: "Write the Blanks" },
+  { type: "paragraphMatch", label: "Match Sentences" },
+];
+
 const PartTab = ({
   part,
-  types,
   difficulty,
   index,
   setPart,
   updatePart,
 }: {
   part?: ReadingPart;
-  types: string[];
   index: number;
   difficulty: Difficulty;
   setPart: (part?: ReadingPart) => void;
@@ -44,6 +49,14 @@ const PartTab = ({
 }) => {
   const [topic, setTopic] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [types, setTypes] = useState<string[]>([]);
+
+  const toggleType = (type: string) =>
+    setTypes((prev) =>
+      prev.includes(type)
+        ? [...prev.filter((x) => x !== type)]
+        : [...prev, type]
+    );
 
   const generate = () => {
     const url = new URLSearchParams();
@@ -181,6 +194,28 @@ const PartTab = ({
 
   return (
     <Tab.Panel className="w-full bg-ielts-reading/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
+        <label className="font-normal text-base text-mti-gray-dim">
+          Exercises
+        </label>
+        <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
+          {availableTypes.map((x) => (
+            <span
+              onClick={() => toggleType(x.type)}
+              key={x.type}
+              className={clsx(
+                "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                "transition duration-300 ease-in-out",
+                !types.includes(x.type)
+                  ? "bg-white border-mti-gray-platinum"
+                  : "bg-ielts-reading/70 border-ielts-reading text-white"
+              )}
+            >
+              {x.label}
+            </span>
+          ))}
+        </div>
+      </div>
       <div className="flex gap-4 items-end">
         <Input
           type="text"
@@ -249,7 +284,6 @@ const ReadingGeneration = () => {
   const [part2, setPart2] = useState<ReadingPart>();
   const [part3, setPart3] = useState<ReadingPart>();
   const [minTimer, setMinTimer] = useState(60);
-  const [types, setTypes] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [resultingExam, setResultingExam] = useState<ReadingExam>();
   const [difficulty, setDifficulty] = useState<Difficulty>(
@@ -266,20 +300,6 @@ const ReadingGeneration = () => {
   const setExams = useExamStore((state) => state.setExams);
   const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-  const availableTypes = [
-    { type: "fillBlanks", label: "Fill the Blanks" },
-    { type: "trueFalse", label: "True or False" },
-    { type: "writeBlanks", label: "Write the Blanks" },
-    { type: "paragraphMatch", label: "Match Sentences" },
-  ];
-
-  const toggleType = (type: string) =>
-    setTypes((prev) =>
-      prev.includes(type)
-        ? [...prev.filter((x) => x !== type)]
-        : [...prev, type]
-    );
-
   const loadExam = async (examId: string) => {
     const exam = await getExamById("reading", examId.trim());
     if (!exam) {
@@ -333,7 +353,6 @@ const ReadingGeneration = () => {
         setPart3(undefined);
         setDifficulty(sample(DIFFICULTIES)!);
         setMinTimer(60);
-        setTypes([]);
       })
       .catch((error) => {
         console.log(error);
@@ -376,30 +395,6 @@ const ReadingGeneration = () => {
           />
         </div>
       </div>
-
-      <div className="flex flex-col gap-3">
-        <label className="font-normal text-base text-mti-gray-dim">
-          Exercises
-        </label>
-        <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
-          {availableTypes.map((x) => (
-            <span
-              onClick={() => toggleType(x.type)}
-              key={x.type}
-              className={clsx(
-                "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                "transition duration-300 ease-in-out",
-                !types.includes(x.type)
-                  ? "bg-white border-mti-gray-platinum"
-                  : "bg-ielts-reading/70 border-ielts-reading text-white"
-              )}
-            >
-              {x.label}
-            </span>
-          ))}
-        </div>
-      </div>
-
       <Tab.Group>
         <Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">
           <Tab
@@ -453,7 +448,6 @@ const ReadingGeneration = () => {
           ].map(({ part, setPart }, index) => (
             <PartTab
               part={part}
-              types={types}
               difficulty={difficulty}
               index={index + 1}
               key={index}