diff --git a/src/components/Exercises/Writing.tsx b/src/components/Exercises/Writing.tsx index 6d7222da..f293ec49 100644 --- a/src/components/Exercises/Writing.tsx +++ b/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 ( -
-
- {info} - - {prompt.split("\\n").map((line, index) => ( - -

{line}

-
-
- ))} -
- {attachment && Exercise attachment} + <> + {attachment && ( + + setIsModalOpen(false)} className="relative z-50"> + +
+ + + +
+ + {attachment.description} + +
+
+
+
+ )} +
+
+ {info} + + {prompt.split("\\n").map((line, index) => ( + +

{line}

+
+
+ ))} +
+ {attachment && ( + setIsModalOpen(true)} + src={attachment.url} + alt={attachment.description} + className="max-w-md self-center rounded-xl cursor-pointer" + /> + )} +
+ +
+ + You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words. + +