@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
31 lines • 1.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Header;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const StyledHeader_js_1 = tslib_1.__importDefault(require("./StyledHeader.js"));
/**
* Header for the notification inbox. It renders a "Mark All Read" button,
* which invokes the `onAllRead` callback.
*
* The component must be wrapped in a {@link MagicBellThemeProvider} component.
*
* @example
* <Header title="Inbox" actions={<button>mark as read</button>>} />
*/
function Header({ title, actions }) {
return ((0, jsx_runtime_1.jsxs)(StyledHeader_js_1.default, { children: [(0, jsx_runtime_1.jsx)("div", { role: "heading", css: (0, react_1.css) `
margin-right: 16px !important;
`, children: title }), (0, jsx_runtime_1.jsx)("div", { css: (0, react_1.css) `
height: 14px;
overflow: visible;
display: flex;
align-items: center;
& > * + * {
margin-left: 8px;
}
`, children: actions })] }));
}
//# sourceMappingURL=Header.js.map