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

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

const Modal = ({ isOpen, setIsOpen, title, ContentComponent, size }) => {
    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">
                    <div className={`inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:p-6 ${size ? size : 'sm:w-full' }`}>
                        <Dialog.Title className="text-lg font-medium text-gray-900">
                        {title}
                        </Dialog.Title>
                        <div className="mt-2">
                            <ContentComponent />
                        </div>
                        <div className="mt-4 flex justify-end">
                            <Dialog.Close asChild>
                                <button
                                    className="px-4 py-2 rounded-md shadow-sm focus:outline-none bg-gray-300 text-gray-700 hover:bg-gray-400"
                                    onClick={() => setIsOpen(false)}
                                >
                                    Fermer
                                </button>
                            </Dialog.Close>
                        </div>
                    </div>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    );
};

export default Modal;