41 lines
966 B
JavaScript
41 lines
966 B
JavaScript
import React from "react";
|
|
import Modal from "react-modal";
|
|
import { useThemeUI, Close } from "theme-ui";
|
|
|
|
function Banner({ isOpen, onRequestClose, children }) {
|
|
const { theme } = useThemeUI();
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onRequestClose={onRequestClose}
|
|
style={{
|
|
overlay: { bottom: "0", top: "initial" },
|
|
content: {
|
|
backgroundColor: theme.colors.highlight,
|
|
top: "initial",
|
|
left: "50%",
|
|
right: 0,
|
|
// Offset for iOS safe zone
|
|
bottom: "env(safe-area-inset-bottom)",
|
|
border: "none",
|
|
padding: "8px",
|
|
margin: "8px",
|
|
paddingRight: "24px",
|
|
maxWidth: "500px",
|
|
transform: "translateX(-50%)",
|
|
},
|
|
}}
|
|
>
|
|
{children}
|
|
<Close
|
|
m={0}
|
|
sx={{ position: "absolute", top: "4px", right: 0 }}
|
|
onClick={onRequestClose}
|
|
/>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default Banner;
|