Navigation rework, added prompt edit to components that were missing

src/components/Exercises/WriteBlanks/Blank.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+
+interface Props {
+    id: string;
+    solutions?: string[];
+    userSolution?: string;
+    maxWords: number;
+    showSolutions?: boolean;
+    setUserSolution: (solution: string) => void;
+}
+
+const Blank: React.FC<Props> = ({ id,
+    maxWords,
+    userSolution,
+    showSolutions = false,
+    setUserSolution, }) => {
+
+    const [userInput, setUserInput] = useState(userSolution || "");
+
+    useEffect(() => {
+        const words = userInput.split(" ");
+        if (words.length > maxWords) {
+            toast.warning(`You have reached your word limit of ${maxWords} words!`, { toastId: "word-limit" });
+            setUserInput(words.join(" ").trim());
+        }
+    }, [maxWords, userInput]);
+
+    return (
+        <input
+            className="py-2 px-3 mx-2 rounded-2xl w-48 bg-white focus:outline-none my-2"
+            placeholder={id}
+            onChange={(e) => setUserInput(e.target.value)}
+            onBlur={() => setUserSolution(userInput)}
+            value={userInput}
+            contentEditable={showSolutions}
+        />
+    );
+}
+
+export default Blank;

src/components/Exercises/WriteBlanks/index.tsx

@@ -0,0 +1,92 @@
+import { WriteBlanksExercise } from "@/interfaces/exam";
+import clsx from "clsx";
+import { useCallback, useEffect, useState } from "react";
+import reactStringReplace from "react-string-replace";
+import { CommonProps } from "../types";
+import Blank from "./Blank";
+
+const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
+	id,
+	prompt,
+	type,
+	maxWords,
+	solutions,
+	userSolutions,
+	isPractice = false,
+	text,
+	registerSolution,
+	headerButtons,
+	footerButtons,
+}) => {
+	const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
+
+	const calculateScore = useCallback(() => {
+		const total = text.match(/({{\d+}})/g)?.length || 0;
+		const correct = answers.filter(
+			(x) =>
+				solutions
+					.find((y) => x.id.toString() === y.id.toString())
+					?.solution.map((y) => y.toLowerCase().trim())
+					.includes(x.solution.toLowerCase().trim()) || false,
+		).length;
+		const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length;
+
+		return { total, correct, missing };
+	}, [answers, solutions, text]);
+
+	useEffect(() => {
+		registerSolution(() => ({
+			exercise: id,
+			solutions: answers,
+			score: calculateScore(),
+			type,
+			isPractice
+		}));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [id, answers, type, isPractice, calculateScore]);
+
+
+	const renderLines = (line: string) => {
+		return (
+			<span className="text-base leading-5">
+				{reactStringReplace(line, /({{\d+}})/g, (match) => {
+					const id = match.replaceAll(/[\{\}]/g, "");
+					const userSolution = answers.find((x) => x.id === id);
+					const setUserSolution = (solution: string) => {
+						setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution }]);
+					};
+
+					return <Blank key={`blank-${id}`} userSolution={userSolution?.solution} maxWords={maxWords} id={id} setUserSolution={setUserSolution} />;
+				})}
+			</span>
+		);
+	};
+
+	return (
+		<div className="flex flex-col gap-4">
+			{headerButtons}
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons && !footerButtons) && "mb-20")}>
+				<span className="text-sm w-full leading-6">
+					{prompt.split("\\n").map((line, index) => (
+						<span key={index}>
+							{line}
+							<br />
+						</span>
+					))}
+				</span>
+				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
+					{text.split("\\n").map((line, index) => (
+						<p key={index}>
+							{renderLines(line)}
+							<br />
+						</p>
+					))}
+				</span>
+				{footerButtons}
+			</div>
+			
+		</div>
+	);
+}
+
+export default WriteBlanks;