Created a simple component for the writing exam

src/pages/_app.tsx

@@ -1,6 +1,7 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/styles/globals.css";
+import "react-toastify/dist/ReactToastify.css";
+import type {AppProps} from "next/app";
 
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+export default function App({Component, pageProps}: AppProps) {
+	return <Component {...pageProps} />;
 }

src/pages/exam/index.tsx

@@ -8,11 +8,14 @@ import {Module} from "@/interfaces";
 import JSON_USER from "@/demo/user.json";
 import JSON_READING from "@/demo/reading.json";
 import JSON_LISTENING from "@/demo/listening.json";
+import JSON_WRITING from "@/demo/writing.json";
 
 import Selection from "@/exams/Selection";
 import Reading from "@/exams/Reading";
-import {Exam, ListeningExam, ReadingExam} from "@/interfaces/exam";
+import {Exam, ListeningExam, ReadingExam, WritingExam} from "@/interfaces/exam";
 import Listening from "@/exams/Listening";
+import Writing from "@/exams/Writing";
+import {ToastContainer} from "react-toastify";
 
 export default function Home() {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
@@ -31,6 +34,8 @@ export default function Home() {
 				return JSON_READING as ReadingExam;
 			case "listening":
 				return JSON_LISTENING as ListeningExam;
+			case "writing":
+				return JSON_WRITING as WritingExam;
 		}
 
 		return undefined;
@@ -53,6 +58,10 @@ export default function Home() {
 			return <Listening exam={exam} onFinish={() => setModuleIndex((prev) => prev + 1)} />;
 		}
 
+		if (exam && exam.module === "writing") {
+			return <Writing exam={exam} />;
+		}
+
 		return <>Loading...</>;
 	};
 
@@ -65,6 +74,7 @@ export default function Home() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
+				<ToastContainer />
 				<Navbar profilePicture={JSON_USER.profilePicture} />
 				{renderScreen()}
 			</main>