@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
32 lines (31 loc) • 1.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = FetchErrorMessage;
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 InternetConnectionErrorMessage_js_1 = tslib_1.__importDefault(require("./InternetConnectionErrorMessage.js"));
const ServerErrorMessage_js_1 = tslib_1.__importDefault(require("./ServerErrorMessage.js"));
/**
* If the browser is not online, it shows a connection error message. Otherwise,
* it shows an API error message.
*
* @example
* <FetchErrorMessage />
*/
function FetchErrorMessage() {
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { notification: notificationTheme } = theme;
return ((0, jsx_runtime_1.jsx)("div", { css: (0, react_1.css) `
padding: 3em !important;
text-align: center;
color: ${notificationTheme.default.textColor};
svg {
margin: 2em auto;
height: 200px;
}
`, children: navigator.onLine ? (0, jsx_runtime_1.jsx)(ServerErrorMessage_js_1.default, {}) : (0, jsx_runtime_1.jsx)(InternetConnectionErrorMessage_js_1.default, {}) }));
}
//# sourceMappingURL=FetchErrorMessage.js.map