@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
27 lines • 947 B
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 Badge from '../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} />
*/
export default function BellBadge({ count }) {
const theme = useTheme();
const { icon: iconTheme } = theme;
if (count === 0)
return null;
return (_jsx("div", { css: css `
position: absolute !important;
transform: translate(-50%, -50%) scale(${Math.max(1, parseInt(iconTheme.width) / 24)});
top: 10%;
left: 80%;
`, children: _jsx(Badge, { count: count }) }));
}
//# sourceMappingURL=BellBadge.js.map