57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import {Dialog, Transition} from "@headlessui/react";
|
|
import {Fragment} from "react";
|
|
import Button from "./Low/Button";
|
|
|
|
interface Props {
|
|
isOpen: boolean;
|
|
onClose: (next?: boolean) => void;
|
|
}
|
|
|
|
export default function BlankQuestionsModal({isOpen, onClose}: Props) {
|
|
return (
|
|
<Transition show={isOpen} as={Fragment}>
|
|
<Dialog onClose={() => onClose(false)} className="relative z-50">
|
|
<Transition.Child
|
|
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/30" />
|
|
</Transition.Child>
|
|
|
|
<Transition.Child
|
|
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">
|
|
<div className="fixed inset-0 flex items-center justify-center p-4">
|
|
<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
|
|
<Dialog.Title className="font-bold text-xl">Questions Unanswered</Dialog.Title>
|
|
<span>
|
|
Please note that you are finishing the current module and once you proceed to the next module, you will no longer be
|
|
able to change the answers in the current one, including your unanswered questions. <br />
|
|
<br />
|
|
Are you sure you want to continue without completing those questions?
|
|
</span>
|
|
<div className="w-full flex justify-between mt-8">
|
|
<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
|
|
Go Back
|
|
</Button>
|
|
<Button color="purple" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
|
|
Continue
|
|
</Button>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</div>
|
|
</Transition.Child>
|
|
</Dialog>
|
|
</Transition>
|
|
);
|
|
}
|