73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
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;
|