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