text: import { Dialog, Transition } from '@headlessui/react'
  import React, { Fragment  } from 'react'
  import PropTypes from 'prop-types';
  
  export default function Modal(props) {
      const { Open, Message, setIsOpen } = props;
      const closeModal = () => {
        setIsOpen(false)
      }
  
      return (
          <>
              <Transition 
                  appear 
                  show={Open} 
                  as={Fragment}>
                  <Dialog
                      as="div"
                      className="fixed inset-0 z-10 overflow-y-auto"
                      onClose={closeModal}
                  >
                      <div className="min-h-screen px-4 text-center">
                          <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"
                          >
                              <Dialog.Overlay className="fixed inset-0" />
                          </Transition.Child>
  
                      { /* This element is to trick the browser into centering the modal contents. */}
                          <span
                              className="inline-block h-screen align-middle"
                              aria-hidden="true"
                          >
                              &#8203;
                          </span>
                          <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="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
                                  <Dialog.Title
                                      as="h3"
                                      className="text-lg font-medium leading-6 text-gray-900"
                                  >
                                     {Message}
                                  </Dialog.Title>
  
                                  <div className="mt-4">
                                      <button
                                          type="button"
                                          className="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-900 bg-gray-200 border border-transparent rounded-md hover:bg-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500"
                                          onClick={closeModal}
                                      >
                                          Got it, thanks!
                                      </button>
                                  </div>
                              </div>
                          </Transition.Child>
                      </div>
                  </Dialog>
              </Transition>
          </>
      );
  }
  
  Modal.propTypes = {
      Open: PropTypes.bool.isRequired,
      setIsOpen: PropTypes.func.isRequired,
      Message: PropTypes.string.isRequired
  };
  