@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
33 lines (32 loc) • 1.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ClearInboxMessage;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const MagicBellContext_js_1 = require("../../context/MagicBellContext.js");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const index_js_1 = tslib_1.__importDefault(require("../Text/index.js"));
/**
* Is renders an "All clear" message and an image to indicate the user has no
* notifications.
*
* @example
* <ClearInboxMessage />
*/
function ClearInboxMessage() {
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { images } = (0, MagicBellContext_js_1.useMagicBellContext)();
const { notification: notificationTheme } = theme;
return ((0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
padding: 3em !important;
text-align: center;
color: ${notificationTheme.default.textColor};
img {
margin: 2em auto;
height: 200px;
}
`, children: [(0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(index_js_1.default, { id: "messages.empty-inbox", defaultMessage: "All clear!<br>We'll let you know when there's more.", html: true }) }), (0, jsx_runtime_1.jsx)("img", { src: images?.emptyInboxUrl || 'https://assets.magicbell.io/images/empty_inbox.png', alt: "No notifications" })] }));
}
//# sourceMappingURL=ClearInboxMessage.js.map