n3wt-school/Front-End/src/components/Modal.js

import * as Dialog from '@radix-ui/react-dialog';

const Modal = ({
  isOpen,
  setIsOpen,
  title,
  ContentComponent,
  modalClassName,
}) => {
  return (
    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
        <Dialog.Content className="fixed inset-0 flex items-center justify-center p-4">
          <div
            className={`inline-block bg-white rounded-lg px-6 py-5 text-left shadow-xl transform transition-all sm:my-8 ${modalClassName ? modalClassName : 'min-w-[500px] m-12 w-max max-h-[80vh] h-full'}`}
          >
            <div className="flex justify-between items-start mb-4">
              <Dialog.Title className="text-xl font-medium text-gray-900">
                {title}
              </Dialog.Title>
              <Dialog.Close asChild>
                <button
                  onClick={() => setIsOpen(false)}
                  className="text-gray-400 hover:text-gray-500 ml-4 focus:outline-none"
                >
                  <span className="sr-only">Fermer</span>
                  <svg
                    className="h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                </button>
              </Dialog.Close>
            </div>
            <div className="w-full h-full">
              <ContentComponent />
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default Modal;