@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
31 lines • 1.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = BellBadge;
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 = tslib_1.__importDefault(require("../Badge/index.js"));
/**
* Badge for the bell. Fetches the notifications to get the number of unseen
* notifications, and displays a badge if there are any.
*
* It must be wrapped in a {@link MagicBellThemeProvider}.
*
* @example
* <BellBadge count={3} />
*/
function BellBadge({ count }) {
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { icon: iconTheme } = theme;
if (count === 0)
return null;
return ((0, jsx_runtime_1.jsx)("div", { css: (0, react_1.css) `
position: absolute !important;
transform: translate(-50%, -50%) scale(${Math.max(1, parseInt(iconTheme.width) / 24)});
top: 10%;
left: 80%;
`, children: (0, jsx_runtime_1.jsx)(index_js_1.default, { count: count }) }));
}
//# sourceMappingURL=BellBadge.js.map