@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
39 lines (37 loc) • 1.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Footer;
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 FooterLogo_js_1 = tslib_1.__importDefault(require("./FooterLogo.js"));
const StyledFooter_js_1 = tslib_1.__importDefault(require("./StyledFooter.js"));
/**
* Footer for the notification inbox. Renders a button to toggle the user
* preferences panel.
*
* @example
* <Footer />
*/
function Footer({ children }) {
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { footer: footerTheme } = theme;
const contentStyle = (0, react_1.css) `
display: flex;
align-items: center;
justify-content: space-between;
color: ${footerTheme.textColor} !important;
a,
button {
color: ${footerTheme.textColor};
display: block;
}
a {
opacity: 0.85;
}
`;
return ((0, jsx_runtime_1.jsx)(StyledFooter_js_1.default, { children: (0, jsx_runtime_1.jsxs)("div", { css: contentStyle, children: [(0, jsx_runtime_1.jsx)(FooterLogo_js_1.default, {}), children] }) }));
}
//# sourceMappingURL=Footer.js.map