Added the speaking module to the application

src/components/Exercises/Speaking.tsx

@@ -0,0 +1,53 @@
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
+import {SpeakingExercise, 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";
+
+export default function Speaking({id, title, text, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
+	return (
+		<div className="flex flex-col h-full w-2/3 items-center justify-center gap-8">
+			<div className="flex flex-col max-w-2xl gap-4">
+				<span className="font-bold">{title}</span>
+				<span className="font-regular ml-8">
+					{text.split("\\n").map((line, index) => (
+						<Fragment key={index}>
+							<span>{line}</span>
+							<br />
+						</Fragment>
+					))}
+				</span>
+				<div className="flex gap-8">
+					<span>You should talk about the following things:</span>
+					<div className="flex flex-col gap-4">
+						{prompts.map((x, index) => (
+							<li className="italic" key={index}>
+								{x}
+							</li>
+						))}
+					</div>
+				</div>
+			</div>
+
+			<div className="self-end flex gap-8">
+				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
+					<div className="absolute left-4">
+						<Icon path={mdiArrowLeft} color="white" size={1} />
+					</div>
+					Back
+				</button>
+				<button
+					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
+					onClick={() => onNext({id, solutions: [], score: {correct: 0, total: 0}})}>
+					Next
+					<div className="absolute right-4">
+						<Icon path={mdiArrowRight} color="white" size={1} />
+					</div>
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/Exercises/Writing.tsx

@@ -7,7 +7,7 @@ import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 
-export default function WriteBlanks({id, prompt, info, wordCounter, onNext, onBack}: WritingExercise & CommonProps) {
+export default function Writing({id, prompt, info, wordCounter, onNext, onBack}: WritingExercise & CommonProps) {
 	const [inputText, setInputText] = useState("");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
 

src/components/Exercises/index.tsx

@@ -3,6 +3,7 @@ import {
 	FillBlanksExercise,
 	MatchSentencesExercise,
 	MultipleChoiceExercise,
+	SpeakingExercise,
 	UserSolution,
 	WriteBlanksExercise,
 	WritingExercise,
@@ -12,6 +13,7 @@ import FillBlanks from "./FillBlanks";
 import MultipleChoice from "./MultipleChoice";
 import WriteBlanks from "./WriteBlanks";
 import Writing from "./Writing";
+import Speaking from "./Speaking";
 
 const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
 
@@ -32,5 +34,7 @@ export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserS
 			return <WriteBlanks {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "writing":
 			return <Writing {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
+		case "speaking":
+			return <Speaking {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
 	}
 };