const ModalBackdrop = styled.div` background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; `; // Modal content styled component const ModalContent = styled.div` background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); `; // Close button styled component const CloseButton = styled.button` position: absolute; top: 10px; right: 10px; background-color: transparent; border: none; font-size: 16px; cursor: pointer; `; const Modal = ({ isOpen, onClose, children }) => { if (!isOpen) return null; return ( <ModalBackdrop> <ModalContent> <CloseButton onClick={onClose}>X</CloseButton> {children} </ModalContent> </ModalBackdrop> ); }; return { Modal };