@vlinderclimate/net-zero-ui/components/shared/SimplePageHeader.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 bgVariant = {
    green: "#9CF3E3",
    blue: "#A3BBFF",
    transparent: "transparent"
};
var HeaderBox = styles.styled(MuiBox__default["default"])(function (_a) {
    var _b;
    var theme = _a.theme, _c = _a.$headerBg, $headerBg = _c === void 0 ? "green" : _c;
    return (_b = {
            backgroundColor: bgVariant[$headerBg],
            img: {
                width: "100%"
            }
        },
        _b[theme.breakpoints.down("md")] = {
            padding: theme.spacing(2, 0)
        },
        _b);
});
var PageHeader = function (_a) {
    var title = _a.title, description = _a.description, children = _a.children, _b = _a.backButton, backButton = _b === void 0 ? true : _b, _c = _a.actionButton, actionButton = _c === void 0 ? false : _c, _d = _a.textAlign, textAlign = _d === void 0 ? "left" : _d, headerBg = _a.headerBg;
    return (jsxRuntime.jsx(HeaderBox, tslib_es6.__assign({ "$headerBg": headerBg }, { children: jsxRuntime.jsx(components_shared_Section["default"], tslib_es6.__assign({ topIndent: true, sx: { paddingBottom: children ? "0 !important" : "40px" } }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(components_GridContainer["default"], tslib_es6.__assign({ alignItems: "flex-start", spacing: 1, mt: { xs: 0, md: children ? 0 : -4 } }, { children: [jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: 1, mt: 1 }, { children: backButton }), void 0), jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: 10, md: 10 }, { children: jsxRuntime.jsxs(MuiBox__default["default"], tslib_es6.__assign({ display: "flex", justifyContent: { xs: "center", md: "flex-start" }, flexDirection: { xs: "column", md: "column" }, flexWrap: { xs: "wrap", md: "nowrap" }, textAlign: { xs: "center", md: textAlign } }, { children: [jsxRuntime.jsxs(MuiBox__default["default"], tslib_es6.__assign({ px: textAlign === "center" ? 2 : 0, margin: textAlign === "center" ? "auto" : 0, maxWidth: textAlign === "center" ? 710 : 840 }, { children: [jsxRuntime.jsx(components_Typography["default"], tslib_es6.__assign({ variant: "h1", component: "h1", mt: { xs: description ? 1 : 0, md: description ? 3 : 0 } }, { children: title }), void 0), description && (jsxRuntime.jsx(MuiBox__default["default"], tslib_es6.__assign({ mt: { xs: 2, md: 3 }, mx: { xs: -5, md: 0 } }, { children: description }), void 0))] }), void 0), actionButton && jsxRuntime.jsx(MuiBox__default["default"], tslib_es6.__assign({ mt: { xs: 3, md: 5 } }, { children: actionButton }), void 0)] }), void 0) }), void 0)] }), void 0), children && (jsxRuntime.jsxs(components_GridContainer["default"], tslib_es6.__assign({ alignItems: "center", spacing: 1, mt: { xs: 4, md: 7 } }, { children: [jsxRuntime.jsx(components_GridItem["default"], { xs: 1 }, void 0), jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: 12, md: 11 }, { children: children }), void 0)] }), void 0))] }, void 0) }), void 0) }), void 0));
};

exports.HeaderBox = HeaderBox;
exports.bgVariant = bgVariant;
exports["default"] = PageHeader;