Implemented a simple page to view the currently registered users

src/exams/Reading.tsx

@@ -7,6 +7,8 @@ import {infoButtonStyle} from "@/constants/buttonStyles";
 import {Dialog, Transition} from "@headlessui/react";
 import {renderExercise} from "@/components/Exercises";
 import {renderSolution} from "@/components/Solutions";
+import {Panel} from "primereact/panel";
+import {Steps} from "primereact/steps";
 
 interface Props {
 	exam: ReadingExam;
@@ -45,7 +47,7 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
 								</Dialog.Title>
 								<div className="mt-2 overflow-auto">
 									<p className="text-sm text-gray-500">
-										{content.split("\n").map((line, index) => (
+										{content.split("\\n").map((line, index) => (
 											<Fragment key={index}>
 												{line}
 												<br />
@@ -115,17 +117,13 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 				</span>
 				<span className="self-end text-sm">You will be allowed to read the text while doing the exercises</span>
 			</div>
-			<div className="bg-gray-300 rounded-xl p-4 flex flex-col gap-4 items-center w-full overflow-auto">
-				<span className="text-xl font-semibold">{exam.text.title}</span>
-				<span>
-					{exam.text.content.split("\n").map((line, index) => (
-						<Fragment key={index}>
-							<span>{line}</span>
-							<br />
-						</Fragment>
+			<Panel header={exam.text.title}>
+				<p>
+					{exam.text.content.split("\\n").map((line, index) => (
+						<p key={index}>{line}</p>
 					))}
-				</span>
-			</div>
+				</p>
+			</Panel>
 		</>
 	);