@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
28 lines (27 loc) • 1.03 kB
JavaScript
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useTheme } from '../../../context/MagicBellThemeContext.js';
import InternetConnectionErrorMessage from './InternetConnectionErrorMessage.js';
import ServerErrorMessage from './ServerErrorMessage.js';
/**
* If the browser is not online, it shows a connection error message. Otherwise,
* it shows an API error message.
*
* @example
* <FetchErrorMessage />
*/
export default function FetchErrorMessage() {
const theme = useTheme();
const { notification: notificationTheme } = theme;
return (_jsx("div", { css: css `
padding: 3em !important;
text-align: center;
color: ${notificationTheme.default.textColor};
svg {
margin: 2em auto;
height: 200px;
}
`, children: navigator.onLine ? _jsx(ServerErrorMessage, {}) : _jsx(InternetConnectionErrorMessage, {}) }));
}
//# sourceMappingURL=FetchErrorMessage.js.map