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

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

const Modal = ({ isOpen, setIsOpen, title, ContentComponent }) => {
    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 min-w-[500px] w-max m-12 h-max">
                        <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">
                            <ContentComponent />
                        </div>
                    </div>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    );
};

export default Modal;