ENCOA-137: Top right side Next Button on the exams

src/components/Exercises/MatchSentences.tsx

@@ -67,13 +67,13 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
-	
+
 	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
 
 	useEffect(() => {
-		setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type});
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [answers, setAnswers])
+	}, [answers, setAnswers]);
 
 	const handleDragEnd = (event: DragEndEvent) => {
 		if (event.over && event.over.id.toString().startsWith("droppable")) {
@@ -100,7 +100,24 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 	}, [hasExamEnded]);
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -150,6 +167,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }