@vlinderclimate/net-zero-ui/components/shared/Header.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 MuiBadge = require('@mui/material/Badge');
var useMediaQuery = require('@mui/material/useMediaQuery');
var components_shared_Menu = require('./Menu.js');
var components_Container = require('../Container.js');
var components_GridContainer = require('../GridContainer.js');
var components_GridItem = require('../GridItem.js');
var components_Button = require('../Button.js');
var components_Icon = require('../Icon.js');
require('@mui/material/Link');
require('@mui/material/MenuItem');
require('@mui/material/Grid');
require('@mui/material/Button');
require('../../theme/colors.js');
require('../../theme/typography.js');
require('../../icons/ArrowLeft.js');
require('../../icons/ArrowRight.js');
require('../../icons/CheckCircle.js');
require('../../icons/CloseCircle.js');
require('../../icons/InfoCircle.js');
require('../../icons/ErrorCircle.js');
require('../../icons/Attention.js');
require('../../icons/HelpCircle.js');
require('../../icons/Lock.js');
require('../../icons/Delete.js');
require('../../icons/TriangleRight.js');
require('../../icons/TriangleLeft.js');
require('../../icons/TriangleUp.js');
require('../../icons/TriangleDown.js');
require('../../icons/Download.js');
require('../../icons/Key.js');
require('../../icons/Edit.js');
require('../../icons/Expand.js');
require('../../icons/Collapse.js');
require('../../icons/Success.js');
require('../../icons/Fail.js');
require('../../icons/Loading.js');
require('../../icons/Check.js');
require('../../icons/ChevronLeft.js');
require('../../icons/ChevronRight.js');
require('../../icons/Plus.js');
require('../../icons/Minus.js');
require('../../icons/Link.js');
require('../../icons/Copy.js');
require('../../icons/Medium.js');
require('../../icons/Twitter.js');
require('../../icons/Telegram.js');
require('../../icons/Sort.js');
require('../../icons/Close.js');
require('../../icons/Search.js');
require('../../icons/Instagram.js');
require('../../icons/LinkedIn.js');
require('../../icons/Reddit.js');
require('../../icons/YouTube.js');
require('../../icons/Update.js');
require('../../icons/Facebook.js');
require('../../icons/Cart.js');
require('../../icons/Menu.js');
require('../../icons/ShowPassword.js');
require('../../icons/HidePassword.js');
require('../../icons/Collection.js');
require('../../icons/Sprout.js');
require('../../icons/Verify.js');
require('../../icons/User.js');
require('../../icons/Convert.js');
require('../../icons/Deposit.js');
require('../../icons/Send.js');
require('../../icons/Receive.js');
require('../../icons/To.js');
require('../../icons/Withdraw.js');
require('../../icons/Clock.js');
require('../../icons/Play.js');
require('../../icons/Help.js');
require('../../icons/CloseSmall.js');
require('../../icons/MinusSmall.js');
require('../../icons/PlusSmall.js');
require('../../icons/Dropdown.js');

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

var MuiBox__default = /*#__PURE__*/_interopDefaultLegacy(MuiBox);
var MuiBadge__default = /*#__PURE__*/_interopDefaultLegacy(MuiBadge);
var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);

var HeaderBox = styles.styled("header")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            margin: "0 auto",
            padding: theme.spacing(2.5, 0),
            position: "absolute",
            zIndex: 100,
            width: "100%",
            ".Button-widthIcon.MuiButton-text": {
                padding: 0
            }
        },
        _b[theme.breakpoints.down("lg")] = {
            padding: "12px 0",
            marginBottom: 0
        },
        _b[theme.breakpoints.down("md")] = {
            ".MuiBadge-badge": {
                top: theme.spacing(0.625),
                right: theme.spacing(0.625)
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            "> .MuiBox-root": {
                paddingRight: theme.spacing(1.5)
            }
        },
        _b);
});
var HeaderComponent = function (_a) {
    var children = _a.children, logo = _a.logo, links = _a.links, cartHandler = _a.cartHandler, menuHandler = _a.menuHandler, isEmpty = _a.isEmpty, props = tslib_es6.__rest(_a, ["children", "logo", "links", "cartHandler", "menuHandler", "isEmpty"]);
    var theme = styles.useTheme();
    var isMobile = useMediaQuery__default["default"](theme.breakpoints.down("md"));
    return (jsxRuntime.jsx(HeaderBox, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(components_Container["default"], { children: jsxRuntime.jsxs(components_GridContainer["default"], tslib_es6.__assign({ justifyContent: "space-between", alignItems: "middle", direction: { xs: "row", md: "row" } }, { children: [jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: 6, sm: 3 }, { children: logo }), void 0), jsxRuntime.jsx(components_GridItem["default"], tslib_es6.__assign({ xs: 6, sm: 9 }, { children: jsxRuntime.jsxs(MuiBox__default["default"], tslib_es6.__assign({ sx: { display: "flex", alignItems: "center", height: "100%", justifyContent: "flex-end" } }, { children: [!isMobile && jsxRuntime.jsx(components_shared_Menu["default"], { list: links }, void 0), cartHandler && (jsxRuntime.jsx(MuiBox__default["default"], tslib_es6.__assign({ sx: { display: "flex", alignItems: "center" } }, { children: jsxRuntime.jsx(MuiBadge__default["default"], tslib_es6.__assign({ color: "error", variant: "dot", sx: { verticalAlign: "inherit" }, invisible: isEmpty }, { children: jsxRuntime.jsx(components_Button["default"], tslib_es6.__assign({ variant: isMobile ? "outlined" : "text", color: "primary", startIcon: jsxRuntime.jsx(components_Icon["default"], { iconKey: "cart", size: isMobile ? "md" : "md" }, void 0), onClick: cartHandler }, (!isMobile && { sx: { padding: "0 !important" } })), void 0) }), void 0) }), void 0)), jsxRuntime.jsx(MuiBox__default["default"], tslib_es6.__assign({ sx: { display: "flex" }, ml: { xs: 1.5, md: 1 }, gap: { xs: 1.5, md: 0 } }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, menuHandler && isMobile && (jsxRuntime.jsx(components_Button["default"], { variant: "outlined", color: "primary", startIcon: jsxRuntime.jsx(components_Icon["default"], { iconKey: "menu", size: "md" }, void 0), onClick: menuHandler }, void 0))] }, void 0) }), void 0)] }), void 0) }), void 0)] }), void 0) }, void 0) }), void 0));
};

exports.HeaderBox = HeaderBox;
exports["default"] = HeaderComponent;