Navigation rework, added prompt edit to components that were missing

src/exams/components/ScriptModal.tsx

@@ -0,0 +1,72 @@
+import Button from "@/components/Low/Button";
+import { Script } from "@/interfaces/exam";
+import { Dialog, DialogPanel, Transition, TransitionChild } from "@headlessui/react";
+import { capitalize } from "lodash";
+import { Fragment } from "react";
+
+interface Props {
+    isOpen: boolean; 
+    script: Script; 
+    onClose: () => void 
+}
+
+const ScriptModal: React.FC<Props> = ({ isOpen, script, onClose }) => {
+	return (
+		<Transition appear show={isOpen} as={Fragment}>
+			<Dialog as="div" className="relative z-10" onClose={onClose}>
+				<TransitionChild
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0">
+					<div className="fixed inset-0 bg-black bg-opacity-25" />
+				</TransitionChild>
+
+				<div className="fixed inset-0 overflow-y-auto">
+					<div className="flex min-h-full items-center justify-center p-4 text-center">
+						<TransitionChild
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95">
+							<DialogPanel className="w-full relative max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+								<div className="mt-2 overflow-auto mb-28">
+									<p className="text-sm">
+										{typeof script === "string" && script.split("\\n").map((line, index) => (
+											<Fragment key={index}>
+												{line}
+												<br />
+											</Fragment>
+										))}
+
+										{typeof script === "object" && script.map((line, index) => (
+											<span key={index}>
+												<b>{line.name} ({capitalize(line.gender)})</b>: {line.text}
+												<br />
+												<br />
+											</span>
+										))}
+									</p>
+								</div>
+
+								<div className="absolute bottom-8 right-8 max-w-[200px] self-end w-full">
+									<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full" onClick={onClose}>
+										Close
+									</Button>
+								</div>
+							</DialogPanel>
+						</TransitionChild>
+					</div>
+				</div>
+			</Dialog>
+		</Transition>
+	);
+}
+
+export default ScriptModal;