ENCOA-268

src/components/PracticeModal.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import Button from "./Low/Button";
+import Modal from "./Modal";
+
+interface Props {
+	open?: boolean
+}
+
+export default function PracticeModal({ open }: Props) {
+	const [isOpen, setIsOpen] = useState<boolean>(open || false)
+
+	return (
+		<Modal title="Practice Questions" isOpen={isOpen} onClose={() => setIsOpen(false)}>
+			<div className="py-4 flex flex-col gap-4 items-center">
+				<span className="w-full">
+					To acquaint yourself with the question types in this section, please respond to the practice questions provided.
+					<br />
+					<b>Do note that these questions are for practice purposes only and are not graded.</b>
+					<br />
+					You may choose to skip them if you prefer.
+				</span>
+				<Button onClick={() => setIsOpen(false)} className="w-full max-w-[200px]">Understood</Button>
+			</div>
+		</Modal>
+	)
+}