@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
39 lines • 1.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = StyledContainer;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const index_js_1 = require("../Styled/index.js");
const useContainerBorderRadius_js_1 = tslib_1.__importDefault(require("./useContainerBorderRadius.js"));
/**
* Container for the notification inbox.
*
* @example
* <StyledContainer height={500}>
* <p>Cannot fetch notifications</p>
* </StyledContainer>
*/
function StyledContainer({ height, children, layout }) {
const { container: theme } = (0, MagicBellThemeContext_js_1.useTheme)();
const [ltBorderRadius, rtBorderRadius, rbBorderRadius, lbBorderRadius] = (0, useContainerBorderRadius_js_1.default)(layout);
return ((0, jsx_runtime_1.jsx)("div", { css: [
index_js_1.cleanslate,
(0, react_1.css) `
background-color: ${theme.backgroundColor};
border-radius: ${ltBorderRadius} ${rtBorderRadius} ${rbBorderRadius} ${lbBorderRadius};
color: ${theme.textColor};
display: flex;
flex-direction: column;
font-family: ${theme.fontFamily} !important;
font-weight: ${theme.fontWeight} !important;
height: ${height ? `${height}px` : 'auto'};
overflow: hidden;
border: ${theme.borderColor ? `1px solid ${theme.borderColor} !important` : undefined};
box-shadow: ${theme.boxShadow ? `${theme.boxShadow} !important` : undefined};
`,
], children: children }));
}
//# sourceMappingURL=StyledContainer.js.map