Implemented the Writing exercise's solution display

src/components/Exercises/Writing.tsx

@@ -8,8 +8,10 @@ import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 import Button from "../Low/Button";
+import {Dialog, Transition} from "@headlessui/react";
 
 export default function Writing({id, prompt, info, type, wordCounter, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
+	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [inputText, setInputText] = useState(userSolutions.length === 1 ? userSolutions[0].solution : "");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
 
@@ -28,33 +30,73 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
 	}, [inputText, wordCounter]);
 
 	return (
-		<div className="flex flex-col h-full w-full gap-9">
-			<div className="flex flex-col w-full gap-7 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
-				<span>{info}</span>
-				<span className="font-semibold">
-					{prompt.split("\\n").map((line, index) => (
-						<Fragment key={index}>
-							<p>{line}</p>
-							<br />
-						</Fragment>
-					))}
-				</span>
-				{attachment && <img src={attachment} alt="Exercise attachment" className="max-w-md self-center" />}
+		<>
+			{attachment && (
+				<Transition show={isModalOpen} as={Fragment}>
+					<Dialog onClose={() => setIsModalOpen(false)} className="relative z-50">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0"
+							enterTo="opacity-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100"
+							leaveTo="opacity-0">
+							<div className="fixed inset-0 bg-black/30" />
+						</Transition.Child>
+
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95">
+							<div className="fixed inset-0 flex items-center justify-center p-4">
+								<Dialog.Panel className="w-fit h-fit rounded-xl bg-white">
+									<img src={attachment.url} alt={attachment.description} className="max-w-4xl w-full self-center rounded-xl p-4" />
+								</Dialog.Panel>
+							</div>
+						</Transition.Child>
+					</Dialog>
+				</Transition>
+			)}
+			<div className="flex flex-col h-full w-full gap-9 mb-20">
+				<div className="flex flex-col w-full gap-7 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
+					<span>{info}</span>
+					<span className="font-semibold">
+						{prompt.split("\\n").map((line, index) => (
+							<Fragment key={index}>
+								<p>{line}</p>
+								<br />
+							</Fragment>
+						))}
+					</span>
+					{attachment && (
+						<img
+							onClick={() => setIsModalOpen(true)}
+							src={attachment.url}
+							alt={attachment.description}
+							className="max-w-md self-center rounded-xl cursor-pointer"
+						/>
+					)}
+				</div>
+
+				<div className="w-full h-full flex flex-col gap-4">
+					<span>
+						You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
+					</span>
+					<textarea
+						className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+						onChange={(e) => setInputText(e.target.value)}
+						value={inputText}
+						placeholder="Write your text here..."
+					/>
+				</div>
 			</div>
 
-			<div className="w-full h-full flex flex-col gap-4">
-				<span>
-					You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
-				</span>
-				<textarea
-					className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
-					onChange={(e) => setInputText(e.target.value)}
-					value={inputText}
-					placeholder="Write your text here..."
-				/>
-			</div>
-
-			<div className="self-end flex justify-between w-full  gap-8">
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
 				<Button
 					color="green"
 					variant="outline"
@@ -70,6 +112,6 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
 					Next
 				</Button>
 			</div>
-		</div>
+		</>
 	);
 }

src/components/Solutions/Writing.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable @next/next/no-img-element */
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
+import {WritingExercise} from "@/interfaces/exam";
+import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import Icon from "@mdi/react";
+import clsx from "clsx";
+import {CommonProps} from ".";
+import {Fragment, useEffect, useState} from "react";
+import {toast} from "react-toastify";
+import Button from "../Low/Button";
+import {Dialog, Transition} from "@headlessui/react";
+
+export default function Writing({id, prompt, info, evaluation, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	return (
+		<>
+			{attachment && (
+				<Transition show={isModalOpen} as={Fragment}>
+					<Dialog onClose={() => setIsModalOpen(false)} className="relative z-50">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0"
+							enterTo="opacity-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100"
+							leaveTo="opacity-0">
+							<div className="fixed inset-0 bg-black/30" />
+						</Transition.Child>
+
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95">
+							<div className="fixed inset-0 flex items-center justify-center p-4">
+								<Dialog.Panel className="w-fit h-fit rounded-xl bg-white">
+									<img src={attachment.url} alt={attachment.description} className="max-w-4xl w-full self-center rounded-xl p-4" />
+								</Dialog.Panel>
+							</div>
+						</Transition.Child>
+					</Dialog>
+				</Transition>
+			)}
+			<div className="flex flex-col h-full w-full gap-8 mb-20">
+				<div className="flex w-full gap-7 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
+					<span className="font-semibold">
+						{prompt.split("\\n").map((line, index) => (
+							<Fragment key={index}>
+								<p>{line}</p>
+								<br />
+							</Fragment>
+						))}
+					</span>
+					{attachment && (
+						<img
+							onClick={() => setIsModalOpen(true)}
+							src={attachment.url}
+							alt={attachment.description}
+							className="max-w-[200px] self-center rounded-xl cursor-pointer"
+						/>
+					)}
+				</div>
+
+				<div className="w-full h-full flex flex-col gap-8">
+					{userSolutions && (
+						<div className="flex flex-col gap-4 w-full">
+							<span>Your answer:</span>
+							<textarea
+								className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+								contentEditable={false}
+								readOnly
+								value={userSolutions[0] as any}
+							/>
+						</div>
+					)}
+					<div className="flex flex-col gap-4 w-full">
+						<div className="flex gap-4 px-1">
+							{Object.keys(evaluation!.task_response).map((key) => (
+								<div className="bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2" key={key}>
+									{key}: Level {evaluation!.task_response[key]}
+								</div>
+							))}
+						</div>
+						<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-mti-gray-smoke rounded-3xl">{evaluation!.comment}</div>
+					</div>
+				</div>
+			</div>
+
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button color="green" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+		</>
+	);
+}

src/components/Solutions/index.tsx

@@ -1,8 +1,9 @@
-import {Exercise, FillBlanksExercise, MatchSentencesExercise, MultipleChoiceExercise, WriteBlanksExercise} from "@/interfaces/exam";
+import {Exercise, FillBlanksExercise, MatchSentencesExercise, MultipleChoiceExercise, WriteBlanksExercise, WritingExercise} from "@/interfaces/exam";
 import dynamic from "next/dynamic";
 import FillBlanks from "./FillBlanks";
 import MultipleChoice from "./MultipleChoice";
 import WriteBlanks from "./WriteBlanks";
+import Writing from "./Writing";
 
 const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), {ssr: false});
 
@@ -21,5 +22,7 @@ export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: (
 			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
 		case "writeBlanks":
 			return <WriteBlanks {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
+		case "writing":
+			return <Writing {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
 	}
 };