Finished implementing a Solutions version for each exercise

src/components/Solutions/MatchSentences.tsx

@@ -0,0 +1,73 @@
+import {MatchSentencesExercise} from "@/interfaces/exam";
+import clsx from "clsx";
+import LineTo from "react-lineto";
+import {CommonProps} from ".";
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
+import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import Icon from "@mdi/react";
+
+export default function MatchSentencesSolutions({options, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
+	return (
+		<>
+			<div className="flex flex-col items-center gap-8">
+				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<div className="grid grid-cols-2 gap-16 place-items-center">
+					<div className="flex flex-col gap-1">
+						{sentences.map(({sentence, id, color, solution}) => (
+							<div
+								key={`question_${id}`}
+								className={clsx(
+									"flex items-center justify-end gap-2 cursor-pointer",
+									userSolutions.find((x) => x.question === id)?.option === solution ? "text-green-500" : "text-red-500",
+								)}>
+								<span>
+									<span className="font-semibold">{id}.</span> {sentence}{" "}
+								</span>
+								<div style={{borderColor: color}} className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)} />
+							</div>
+						))}
+					</div>
+					<div className="flex flex-col gap-1">
+						{options.map(({sentence, id}) => (
+							<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
+								<div
+									style={
+										sentences.find((x) => x.solution === id)
+											? {
+													border: `2px solid ${sentences.find((x) => x.solution === id)!.color}`,
+											  }
+											: {}
+									}
+									className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
+								/>
+								<span>
+									<span className="font-semibold">{id}.</span> {sentence}{" "}
+								</span>
+							</div>
+						))}
+					</div>
+					{sentences.map((sentence, index) => (
+						<div key={`solution_${index}`} className="absolute">
+							<LineTo className="rounded-full" from={sentence.id} to={sentence.solution} borderColor={sentence.color} borderWidth={5} />
+						</div>
+					))}
+				</div>
+			</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>
+		</>
+	);
+}