@magicbell/magicbell-react/dist/commonjs/components/Header/StyledHeader.js

React components for building a notification inbox for your app

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = StyledHeader;
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 color_js_1 = require("../../lib/color.js");
const index_js_1 = require("../Styled/index.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
 * <StyledHeader>Title</StyledHeader>
 */
function StyledHeader({ children }) {
    const theme = (0, MagicBellThemeContext_js_1.useTheme)();
    const { header: headerTheme } = theme;
    const style = (0, react_1.css) `
    align-items: center;
    background: ${(0, color_js_1.toRGBA)(headerTheme.backgroundColor, headerTheme.backgroundOpacity)} !important;
    color: ${headerTheme.textColor};
    display: flex;
    font-family: ${headerTheme.fontFamily} !important;
    font-size: ${headerTheme.fontSize} !important;
    justify-content: space-between;
    text-align: ${headerTheme.textAlign} !important;
    text-transform: ${headerTheme.textTransform} !important;
    padding: ${headerTheme.padding} !important;
    flex-shrink: 0 !important;
    border-bottom: ${headerTheme.borderColor ? `1px solid ${headerTheme.borderColor} !important` : undefined};
    font-weight: ${headerTheme.fontWeight};
    height: ${headerTheme.fontSize} !important;

    &:first-of-type {
      border-radius: ${headerTheme.borderRadius} ${headerTheme.borderRadius} 0 0 !important;
    }

    &:last-of-type {
      border-radius: 0 0 ${headerTheme.borderRadius} ${headerTheme.borderRadius}!important;
    }

    & button:hover {
      opacity: 0.8;
    }

    & button:active {
      opacity: 0.9;
    }

    & button:focus {
      outline: none;
    }

    & button:focus-visible {
      outline: 2px ${headerTheme.textColor} auto !important;
    }
  `;
    return (0, jsx_runtime_1.jsx)("div", { css: [index_js_1.cleanslate, style], children: children });
}
//# sourceMappingURL=StyledHeader.js.map