@vlinderclimate/net-zero-ui/components/shared/InnerHeader.js

<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var styles = require('@mui/material/styles');
var MuiBox = require('@mui/material/Box');
var components_shared_Section = require('./Section.js');
var components_GridContainer = require('../GridContainer.js');
var components_GridItem = require('../GridItem.js');
var components_Typography = require('../Typography.js');
require('../Container.js');
require('@mui/material/Grid');
require('@mui/material/Typography');
require('../../theme/typography.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var MuiBox__default = /*#__PURE__*/_interopDefaultLegacy(MuiBox);

var HeaderBox = styles.styled(MuiBox__default["default"])(function (_a) {
    var _b;
    var theme = _a.theme, $headerBg = _a.$headerBg;
    return (_b = {
            background: $headerBg
                ? theme.palette.gray[400] + " url(" + $headerBg + ") no-repeat center bottom / cover"
                : theme.palette.gray[400]
        },
        _b[theme.breakpoints.down("md")] = {
            padding: theme.spacing(2, 0)
        },
        _b);
});
var Item = styles.styled(MuiBox__default["default"])(function () { return ({}); });
var Divider = styles.styled(components_GridItem["default"])(function (_a) {
    var theme = _a.theme;
    return ({
        borderLeft: "1px solid rgba(0, 0, 0, 0.15)",
        height: "100%",
        transform: "rotate(20deg)",
        position: "absolute",
        top: 2,
        left: theme.spacing(-2)
    });
});
var InnerHeader = function (_a) {
    var title = _a.title, image = _a.image, rightItem = _a.rightItem, backButton = _a.backButton, children = _a.children, headerBg = _a.headerBg, props = tslib_es6.__rest(_a, ["title", "image", "rightItem", "backButton", "children", "headerBg"]);
    return (jsxRuntime.jsx(HeaderBox, tslib_es6.__assign({ "$headerBg": headerBg }, { children: jsxRuntime.jsx(components_shared_Section["default"], tslib_es6.__assign({ topIndent: true }, props, { children: jsxRuntime.jsxs(components_GridContainer["default"], tslib_es6.__assign({ alignItems: "center", spacing: 1, mt: { xs: 1, md: rightItem ? -6 : 1 } }, { children: [backButton && jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: 1 }, { children: backButton }), void 0), jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: rightItem ? 12 : 10, md: rightItem ? 7 : 11 }, { children: jsxRuntime.jsxs(MuiBox__default["default"], tslib_es6.__assign({ display: "flex", alignItems: "center", justifyContent: { xs: "center", md: "flex-start" }, flexDirection: { xs: "column", md: "unset" }, flexWrap: { xs: "wrap", md: "nowrap" }, textAlign: { xs: "center", md: "left" } }, { children: [image && (jsxRuntime.jsx(Item, tslib_es6.__assign({ pr: { xs: 0, md: 5 }, mb: { xs: 3, sm: 4, md: 0 } }, { children: image }), void 0)), jsxRuntime.jsxs(Item, tslib_es6.__assign({ sx: { flexBasis: "78%", maxWidth: "78%", flexGrow: 1 } }, { children: [jsxRuntime.jsx(components_Typography["default"], tslib_es6.__assign({ variant: "h1", component: "div", marginBottom: { xs: children ? 0 : 1, md: children ? 0 : 2 } }, { children: title }), void 0), children] }), void 0)] }), void 0) }), void 0), rightItem && (jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: 12, md: 5 }, { children: rightItem }), void 0))] }), void 0) }), void 0) }), void 0));
};

exports.Divider = Divider;
exports.HeaderBox = HeaderBox;
exports.Item = Item;
exports["default"] = InnerHeader;