@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
33 lines • 1.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotificationState;
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 DotIcon_js_1 = tslib_1.__importDefault(require("../icons/DotIcon.js"));
/**
* Component that renders a dot with style based on notification state
*
* @example
* <NotificationState notification={notification} />
*/
function NotificationState({ notification }) {
const { notification: themeVariants } = (0, MagicBellThemeContext_js_1.useTheme)();
const theme = !notification.isSeen
? themeVariants.unseen
: !notification.isRead
? themeVariants.unread
: themeVariants.default;
return ((0, jsx_runtime_1.jsx)("div", { css: (0, react_1.css) `
flex: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
color: ${theme.state.color} !important;
`, children: (0, jsx_runtime_1.jsx)(DotIcon_js_1.default, {}) }));
}
//# sourceMappingURL=NotificationState.js.map