@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
51 lines (49 loc) • 1.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = StyledContainer;
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 color_js_1 = require("../../lib/color.js");
const index_js_1 = require("../Styled/index.js");
/**
* A container for the `ClickableNotification` component. The style is taken
* from the theme.
*
* @example
* <StyledContainer notification={notification} onClick={openActionUrl} />
*/
function StyledContainer({ notification, children, ...props }) {
const { notification: themeVariants } = (0, MagicBellThemeContext_js_1.useTheme)();
const theme = !notification.isSeen
? themeVariants.unseen
: !notification.isRead
? themeVariants.unread
: themeVariants.default;
const style = (0, react_1.css) `
background-color: ${(0, color_js_1.toRGBA)(theme.backgroundColor, theme.backgroundOpacity)} !important;
border-radius: ${theme.borderRadius} !important;
color: ${theme.textColor} !important;
cursor: pointer;
display: flex;
align-items: center;
font-family: ${theme.fontFamily} !important;
font-size: ${theme.fontSize} !important;
margin: ${theme.margin} !important;
padding: ${theme.padding} !important;
text-align: ${theme.textAlign} !important;
text-transform: ${theme.textTransform};
transition: background-color 300ms ease-out;
min-height: 32px;
position: relative !important;
&:hover {
background-color: ${(0, color_js_1.toRGBA)(theme.hover.backgroundColor, theme.hover.backgroundOpacity)} !important;
}
& > * {
position: relative;
}
`;
return ((0, jsx_runtime_1.jsx)("div", { css: [index_js_1.cleanslate, style], ...props, children: children }));
}
//# sourceMappingURL=StyledContainer.js.map