Navigation rework, added prompt edit to components that were missing

src/components/Exercises/MatchSentences/DragNDrop.tsx

@@ -0,0 +1,65 @@
+import { MatchSentenceExerciseOption, MatchSentenceExerciseSentence } from "@/interfaces/exam";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import clsx from "clsx";
+
+interface DroppableQuestionAreaProps { 
+    question: MatchSentenceExerciseSentence; 
+    answer?: string 
+}
+
+const DroppableQuestionArea: React.FC<DroppableQuestionAreaProps> = ({ question, answer }) => {
+	const { isOver, setNodeRef } = useDroppable({ id: `droppable_sentence_${question.id}` });
+
+	return (
+		<div className="grid grid-cols-3 gap-4" ref={setNodeRef}>
+			<div className="flex items-center gap-3 cursor-pointer col-span-2">
+				<button
+					className={clsx(
+						"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple p-2 rounded-full z-10",
+						"transition duration-300 ease-in-out",
+					)}>
+					{question.id}
+				</button>
+				<span>{question.sentence}</span>
+			</div>
+			<div
+				key={`answer_${question.id}_${answer}`}
+				className={clsx("w-48 h-10 border rounded-xl flex items-center justify-center", isOver && "border-mti-purple-light")}>
+				{answer && `Paragraph ${answer}`}
+			</div>
+		</div>
+	);
+}
+
+const DraggableOptionArea: React.FC<{ option: MatchSentenceExerciseOption }> = ({ option }) => {
+	const { attributes, listeners, setNodeRef, transform } = useDraggable({
+		id: `draggable_option_${option.id}`,
+	});
+
+	const style = transform
+		? {
+			transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+			zIndex: 99,
+		}
+		: undefined;
+
+	return (
+		<div className={clsx("flex items-center justify-start gap-6 cursor-pointer")} ref={setNodeRef} style={style} {...listeners} {...attributes}>
+			<button
+				id={`option_${option.id}`}
+				// onClick={() => selectOption(id)}
+				className={clsx(
+					"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple px-3 py-2 rounded-full z-10",
+					"transition duration-300 ease-in-out",
+					option.id,
+				)}>
+				Paragraph {option.id}
+			</button>
+		</div>
+	);
+}
+
+export {
+	DroppableQuestionArea,
+	DraggableOptionArea,
+}