Implemented a simple page to view the currently registered users

src/components/Exercises/FillBlanks.tsx

@@ -110,13 +110,20 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
 						setCurrentBlankId(undefined);
 					}}
 				/>
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<span className="text-lg font-medium text-center px-48">
+					{prompt.split("\\n").map((line, index) => (
+						<Fragment key={index}>
+							{line}
+							<br />
+						</Fragment>
+					))}
+				</span>
 				<span>
-					{text.split("\n").map((line) => (
-						<>
+					{text.split("\\n").map((line, index) => (
+						<Fragment key={index}>
 							{renderLines(line)}
 							<br />
-						</>
+						</Fragment>
 					))}
 				</span>
 			</div>

src/components/Exercises/WriteBlanks.tsx

@@ -79,7 +79,7 @@ export default function WriteBlanks({id, prompt, maxWords, solutions, text, onNe
 			<div className="flex flex-col">
 				<span className="text-lg font-medium text-center px-48">{prompt}</span>
 				<span>
-					{text.split("\n").map((line) => (
+					{text.split("\\n").map((line) => (
 						<>
 							{renderLines(line)}
 							<br />

src/components/Navbar.tsx

@@ -35,10 +35,9 @@ export default function Navbar({profilePicture}: Props) {
 					</label>
 					<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
 						<li>
-							<a className="justify-between">
+							<Link href="/profile" className="justify-between">
 								Profile
-								<span className="badge">New</span>
-							</a>
+							</Link>
 						</li>
 						<li>
 							<a>Settings</a>

src/components/ProfileCard.tsx

@@ -17,9 +17,7 @@ export default function ProfileCard({user, className}: Props) {
 					<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
 				</div>
 				<div className="flex flex-col justify-center">
-					<span className="text-neutral-600 font-bold text-2xl">
-						{user.name.first} {user.name.last}
-					</span>
+					<span className="text-neutral-600 font-bold text-2xl">{user.name}</span>
 					<LevelLabel experience={user.experience} />
 				</div>
 			</div>

src/components/Solutions/FillBlanks.tsx

@@ -47,7 +47,7 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 			<div className="flex flex-col">
 				<span className="text-lg font-medium text-center px-48">{prompt}</span>
 				<span>
-					{text.split("\n").map((line) => (
+					{text.split("\\n").map((line) => (
 						<>
 							{renderLines(line)}
 							<br />

src/components/Solutions/WriteBlanks.tsx

@@ -82,7 +82,7 @@ export default function WriteBlanksSolutions({
 			<div className="flex flex-col">
 				<span className="text-lg font-medium text-center px-48">{prompt}</span>
 				<span>
-					{text.split("\n").map((line) => (
+					{text.split("\\n").map((line) => (
 						<>
 							{renderLines(line)}
 							<br />