Implemented the Writing exercise's solution display

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>
+		</>
+	);
+}