@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
35 lines • 1.5 kB
JavaScript
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import { cleanslate } from '../Styled/index.js';
import useContainerBorderRadius from './useContainerBorderRadius.js';
/**
* Container for the notification inbox.
*
* @example
* <StyledContainer height={500}>
* <p>Cannot fetch notifications</p>
* </StyledContainer>
*/
export default function StyledContainer({ height, children, layout }) {
const { container: theme } = useTheme();
const [ltBorderRadius, rtBorderRadius, rbBorderRadius, lbBorderRadius] = useContainerBorderRadius(layout);
return (_jsx("div", { css: [
cleanslate,
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