@wulperstudio/cms/node/organisms/HeaderLanding/HeaderLanding.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.HeaderLanding = void 0;
var _react = _interopRequireDefault(require("react"));
var _uuid = require("uuid");
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _HeaderFlex = require("../HeaderFlex");
var _components = require("../../components");
var _jsxRuntime = require("react/jsx-runtime");
var HeaderLanding = exports.HeaderLanding = function HeaderLanding(_ref) {
  var logo = _ref.logo,
    isAuth = _ref.isAuth,
    listItem = _ref.listItem,
    title = _ref.title,
    description = _ref.description,
    _ref$styleLogo = _ref.styleLogo,
    styleLogo = _ref$styleLogo === void 0 ? 'apaisado' : _ref$styleLogo,
    avatarProps = _ref.avatarProps,
    listIcon = _ref.listIcon,
    sticky = _ref.sticky,
    scrolled = _ref.scrolled,
    children = _ref.children,
    _ref$positionLinks = _ref.positionLinks,
    positionLinks = _ref$positionLinks === void 0 ? 'center' : _ref$positionLinks;
  var theme = (0, _material.useTheme)();
  var isMqMd = (0, _material.useMediaQuery)(theme.breakpoints.down('md'));
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderFlex.HeaderFlex, {
    sticky: sticky,
    scrolled: scrolled,
    sx: {
      backgroundColor: theme.palette.background["default"],
      minHeight: '75px',
      paddingY: '1rem',
      boxSizing: 'border-box'
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Container, {
      maxWidth: "xl",
      sx: {
        mx: 'auto',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        columnGap: 2
      },
      children: [isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          children: title
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "h2",
          children: description
        })]
      }), styleLogo === 'apaisado' && !isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          '&:hover': {
            cursor: 'pointer'
          }
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
          component: "img",
          src: logo,
          alt: "logo",
          width: "180px",
          height: "60px"
        })
      }), styleLogo === 'rounded' && !isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          width: 42,
          height: 42,
          background: "url(".concat(logo, ") center no-repeat"),
          backgroundSize: 'cover',
          borderRadius: '50%',
          '&:hover': {
            cursor: 'pointer'
          }
        }
      }), listItem && !isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
        component: "nav",
        sx: Object.assign({}, positionLinks === 'left' && {
          flexGrow: 1
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
          component: "ul",
          direction: "row",
          spacing: 3,
          sx: {
            padding: 0
          },
          children: listItem == null ? void 0 : listItem.map(function (item) {
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
              children: children(item)
            }, (0, _uuid.v4)());
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        alignItems: "center",
        columnGap: "12px",
        children: [listIcon.map(function (_ref2) {
          var icon = _ref2.icon,
            _onClick = _ref2.onClick;
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return _onClick && _onClick();
              },
              sx: {
                border: "1px solid ".concat(theme.palette.background.paper),
                boxShadow: theme.shadows[1]
              }
            },
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: icon,
              color: theme.palette.text.secondary
            })
          }, (0, _uuid.v4)());
        }), !isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
          onClick: function onClick() {
            return avatarProps.onClick && avatarProps.onClick();
          },
          alt: isAuth ? avatarProps == null ? void 0 : avatarProps.alt : undefined,
          src: isAuth ? avatarProps.src : '/broken-image.jpg',
          sx: {
            '&:hover': {
              cursor: 'pointer'
            }
          }
        })]
      })]
    })
  });
};