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

Wulper Studio Library Components CMS

import React from 'react';
import { v4 } from 'uuid';
import { Icon } from '@iconify/react';
import { Avatar, Box, Container, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
import { HeaderFlex } from '../HeaderFlex';
import { IconButtonComponent } from '../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var 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 = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  return /*#__PURE__*/_jsx(HeaderFlex, {
    sticky: sticky,
    scrolled: scrolled,
    sx: {
      backgroundColor: theme.palette.background["default"],
      minHeight: '75px',
      paddingY: '1rem',
      boxSizing: 'border-box'
    },
    children: /*#__PURE__*/_jsxs(Container, {
      maxWidth: "xl",
      sx: {
        mx: 'auto',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        columnGap: 2
      },
      children: [isMqMd && /*#__PURE__*/_jsxs(Stack, {
        children: [/*#__PURE__*/_jsx(Typography, {
          variant: "body2",
          children: title
        }), /*#__PURE__*/_jsx(Typography, {
          variant: "h2",
          children: description
        })]
      }), styleLogo === 'apaisado' && !isMqMd && /*#__PURE__*/_jsx(Box, {
        sx: {
          '&:hover': {
            cursor: 'pointer'
          }
        },
        children: /*#__PURE__*/_jsx(Box, {
          component: "img",
          src: logo,
          alt: "logo",
          width: "180px",
          height: "60px"
        })
      }), styleLogo === 'rounded' && !isMqMd && /*#__PURE__*/_jsx(Box, {
        sx: {
          width: 42,
          height: 42,
          background: "url(".concat(logo, ") center no-repeat"),
          backgroundSize: 'cover',
          borderRadius: '50%',
          '&:hover': {
            cursor: 'pointer'
          }
        }
      }), listItem && !isMqMd && /*#__PURE__*/_jsx(Stack, {
        component: "nav",
        sx: Object.assign({}, positionLinks === 'left' && {
          flexGrow: 1
        }),
        children: /*#__PURE__*/_jsx(Stack, {
          component: "ul",
          direction: "row",
          spacing: 3,
          sx: {
            padding: 0
          },
          children: listItem == null ? void 0 : listItem.map(function (item) {
            return /*#__PURE__*/_jsx(React.Fragment, {
              children: children(item)
            }, v4());
          })
        })
      }), /*#__PURE__*/_jsxs(Stack, {
        direction: "row",
        alignItems: "center",
        columnGap: "12px",
        children: [listIcon.map(function (_ref2) {
          var icon = _ref2.icon,
            _onClick = _ref2.onClick;
          return /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return _onClick && _onClick();
              },
              sx: {
                border: "1px solid ".concat(theme.palette.background.paper),
                boxShadow: theme.shadows[1]
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: icon,
              color: theme.palette.text.secondary
            })
          }, v4());
        }), !isMqMd && /*#__PURE__*/_jsx(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'
            }
          }
        })]
      })]
    })
  });
};