Added an exercise to write in blank spaces

src/components/Exercises/WriteBlanks.tsx

@@ -0,0 +1,56 @@
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
+import {WriteBlanksExercise} from "@/interfaces/exam";
+import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import Icon from "@mdi/react";
+import clsx from "clsx";
+import {useState} from "react";
+import reactStringReplace from "react-string-replace";
+import {CommonProps} from ".";
+
+export default function WriteBlanks({prompt, maxWords, solutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
+	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
+
+	const renderLines = (line: string) => {
+		return (
+			<span>
+				{reactStringReplace(line, /({{\d+}})/g, (match) => {
+					const id = match.replaceAll(/[\{\}]/g, "");
+					const userSolution = userSolutions.find((x) => x.id === id);
+
+					return <input className="input border rounded-xl px-2 text-blue-400 border-blue-400 py-1" placeholder={id} />;
+				})}
+			</span>
+		);
+	};
+
+	return (
+		<>
+			<div className="flex flex-col">
+				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<span>
+					{text.split("\n").map((line) => (
+						<>
+							{renderLines(line)}
+							<br />
+						</>
+					))}
+				</span>
+			</div>
+
+			<div className="self-end flex gap-8">
+				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
+					<div className="absolute left-4">
+						<Icon path={mdiArrowLeft} color="white" size={1} />
+					</div>
+					Back
+				</button>
+				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={onNext}>
+					Next
+					<div className="absolute right-4">
+						<Icon path={mdiArrowRight} color="white" size={1} />
+					</div>
+				</button>
+			</div>
+		</>
+	);
+}