@magicbell/magicbell-react/dist/esm/components/Header/Header.js

React components for building a notification inbox for your app

import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import StyledHeader from './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>>} />
 */
export default function Header({ title, actions }) {
    return (_jsxs(StyledHeader, { children: [_jsx("div", { role: "heading", css: css `
          margin-right: 16px !important;
        `, children: title }), _jsx("div", { css: css `
          height: 14px;
          overflow: visible;
          display: flex;
          align-items: center;
          & > * + * {
            margin-left: 8px;
          }
        `, children: actions })] }));
}
//# sourceMappingURL=Header.js.map