@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
40 lines (39 loc) • 1.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Badge;
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");
/**
* Badge to display the number of unseen notifications. The color of the badge
* can be customized through the theme context.
*
* @example
* <Badge />
*/
function Badge({ count }) {
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { unseenBadge: badgeTheme } = theme;
const style = (0, react_1.css) `
align-items: center;
background: ${(0, color_js_1.toRGBA)(badgeTheme.backgroundColor, badgeTheme.backgroundOpacity)} !important;
border: 1px solid ${badgeTheme.borderColor} !important;
border-radius: ${badgeTheme.borderRadius} !important;
color: ${badgeTheme.textColor} !important;
display: flex;
font-family: ${badgeTheme.fontFamily} !important;
font-size: ${badgeTheme.fontSize} !important;
font-weight: ${badgeTheme.fontWeight} !important;
padding: ${badgeTheme.padding} !important;
text-align: ${badgeTheme.textAlign} !important;
text-transform: ${badgeTheme.textTransform} !important;
div {
width: 100%;
}
`;
return ((0, jsx_runtime_1.jsx)("div", { css: [index_js_1.cleanslate, style], children: (0, jsx_runtime_1.jsx)("div", { "aria-label": `${count} unread items`, "aria-live": "polite", role: "status", children: count > 99 ? '99+' : count }) }));
}
//# sourceMappingURL=Badge.js.map