Implemented a simple "match the sentence" exercise

src/components/Exercises/FillBlanks.tsx

@@ -6,7 +6,7 @@ import {Fragment, useState} from "react";
 import reactStringReplace from "react-string-replace";
 
 interface WordsPopoutProps {
-	words: string[];
+	words: {word: string; isDisabled: boolean}[];
 	isOpen: boolean;
 	onCancel: () => void;
 	onAnswer: (answer: string) => void;
@@ -44,10 +44,11 @@ function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
 								<div className="mt-4 grid grid-cols-3 gap-4">
 									{words.map((word) => (
 										<button
-											key={word}
-											onClick={() => onAnswer(word)}
+											key={word.word}
+											onClick={() => onAnswer(word.word)}
+											disabled={word.isDisabled}
 											className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
-											{word}
+											{word.word}
 										</button>
 									))}
 								</div>
@@ -90,7 +91,7 @@ export default function FillBlanks({allowRepetition, prompt, solutions, text, wo
 	return (
 		<div className="flex flex-col">
 			<WordsPopout
-				words={words}
+				words={words.map((word) => ({word, isDisabled: allowRepetition ? false : userSolutions.map((x) => x.solution).includes(word)}))}
 				isOpen={!!currentBlankId}
 				onCancel={() => setCurrentBlankId(undefined)}
 				onAnswer={(solution: string) => {