Files
Travel-policy-/frontend/src/components/Modal/Modal.jsx

34 lines
911 B
JavaScript

import React from 'react';
const Modal = ({ onClose, children }) => {
return (
<div
className="fixed top-0 inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
onClick={onClose}
>
<div
className="bg-white dark:bg-[#303134] p-6 rounded-lg relative w-11/12 md:w-3/5 lg:w-2/5 max-h-[85%] h-min overflow-auto transition-colors duration-200"
onClick={(e) => e.stopPropagation()}
>
<div className="flex justify-start p-2">
<button
type="button"
className="absolute top-3 right-3 text-xl font-bold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
onClick={onClose}
>
X
</button>
</div>
<div className="h-full overflow-y-auto">
{children}
</div>
</div>
</div>
);
};
export default Modal;