@magicbell/magicbell-react/dist/esm/components/Bell/BellBadge.js

React components for building a notification inbox for your app

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