Updated the FillBlanks to the new format

src/components/Generation/fill.blanks.edit.tsx

@@ -1,84 +1,82 @@
-import { FillBlanksExercise } from "@/interfaces/exam";
+import {FillBlanksExercise} from "@/interfaces/exam";
 import React from "react";
 import Input from "@/components/Low/Input";
 
 interface Props {
-  exercise: FillBlanksExercise;
-  updateExercise: (data: any) => void;
+	exercise: FillBlanksExercise;
+	updateExercise: (data: any) => void;
 }
 
 const FillBlanksEdit = (props: Props) => {
-  const { exercise, updateExercise } = props;
-  return (
-    <>
-      <Input
-        type="text"
-        label="Prompt"
-        name="prompt"
-        required
-        value={exercise.prompt}
-        onChange={(value) =>
-          updateExercise({
-            prompt: value,
-          })
-        }
-      />
-      <Input
-        type="text"
-        label="Text"
-        name="text"
-        required
-        value={exercise.text}
-        onChange={(value) =>
-          updateExercise({
-            text: value,
-          })
-        }
-      />
-      <h1>Solutions</h1>
-      <div className="w-full flex flex-wrap -mx-2">
-        {exercise.solutions.map((solution, index) => (
-          <div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
-            <Input
-              type="text"
-              label={`Solution ${index + 1}`}
-              name="solution"
-              required
-              value={solution.solution}
-              onChange={(value) =>
-                updateExercise({
-                  solutions: exercise.solutions.map((sol) =>
-                    sol.id === solution.id ? { ...sol, solution: value } : sol
-                  ),
-                })
-              }
-            />
-          </div>
-        ))}
-      </div>
-      <h1>Words</h1>
-      <div className="w-full flex flex-wrap -mx-2">
-        {exercise.words.map((word, index) => (
-          <div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
-            <Input
-              type="text"
-              label={`Word ${index + 1}`}
-              name="word"
-              required
-              value={word}
-              onChange={(value) =>
-                updateExercise({
-                  words: exercise.words.map((sol, idx) =>
-                    index === idx ? value : sol
-                  ),
-                })
-              }
-            />
-          </div>
-        ))}
-      </div>
-    </>
-  );
+	const {exercise, updateExercise} = props;
+	return (
+		<>
+			<Input
+				type="text"
+				label="Prompt"
+				name="prompt"
+				required
+				value={exercise.prompt}
+				onChange={(value) =>
+					updateExercise({
+						prompt: value,
+					})
+				}
+			/>
+			<Input
+				type="text"
+				label="Text"
+				name="text"
+				required
+				value={exercise.text}
+				onChange={(value) =>
+					updateExercise({
+						text: value,
+					})
+				}
+			/>
+			<h1>Solutions</h1>
+			<div className="w-full flex flex-wrap -mx-2">
+				{exercise.solutions.map((solution, index) => (
+					<div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
+						<Input
+							type="text"
+							label={`Solution ${index + 1}`}
+							name="solution"
+							required
+							value={solution.solution}
+							onChange={(value) =>
+								updateExercise({
+									solutions: exercise.solutions.map((sol) => (sol.id === solution.id ? {...sol, solution: value} : sol)),
+								})
+							}
+						/>
+					</div>
+				))}
+			</div>
+			<h1>Words</h1>
+			<div className="w-full flex flex-wrap -mx-2">
+				{exercise.words.map((word, index) => (
+					<div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
+						<Input
+							type="text"
+							label={`Word ${index + 1}`}
+							name="word"
+							required
+							value={typeof word === "string" ? word : word.word}
+							onChange={(value) =>
+								updateExercise({
+									words: exercise.words.map((sol, idx) =>
+										index === idx ? (typeof word === "string" ? value : {...word, word: value}) : sol,
+									),
+								})
+							}
+						/>
+					</div>
+				))}
+			</div>
+		</>
+	);
 };
 
 export default FillBlanksEdit;