@wulperstudio/cms/layouts/LayoutRightLeftCenter/index.js

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["headerCmp", "leftCmp", "rightCmp", "variant", "componentProps"],
  _excluded2 = ["sx"],
  _excluded3 = ["sx"],
  _excluded4 = ["sx"],
  _excluded5 = ["sx"];
import React from 'react';
import { Box, useMediaQuery, useTheme } from '@mui/material';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var LayoutRightLeftCenter = function LayoutRightLeftCenter(_ref) {
  var headerCmp = _ref.headerCmp,
    leftCmp = _ref.leftCmp,
    rightCmp = _ref.rightCmp,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'columns' : _ref$variant,
    componentProps = _ref.componentProps,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  var sx = props.sx,
    rest = _objectWithoutProperties(props, _excluded2);
  var _ref2 = (componentProps == null ? void 0 : componentProps.header) || {},
    sxHeader = _ref2.sx,
    restHeaderProps = _objectWithoutProperties(_ref2, _excluded3);
  var _ref3 = (componentProps == null ? void 0 : componentProps.left) || {},
    sxLeft = _ref3.sx,
    restLeftProps = _objectWithoutProperties(_ref3, _excluded4);
  var _ref4 = (componentProps == null ? void 0 : componentProps.right) || {},
    sxRight = _ref4.sx,
    restRightProps = _objectWithoutProperties(_ref4, _excluded5);
  return /*#__PURE__*/_jsxs(Box, Object.assign({
    sx: Object.assign({
      minHeight: '100vh',
      display: 'grid',
      gridTemplateRows: 'auto 1fr',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gridTemplateAreas: "\n          'header header'\n          'left right'\n        "
    }, (variant === 'center' || isMqMd) && {
      gridTemplateColumns: '1fr',
      alignItems: 'center',
      justifyItems: 'center',
      gridTemplateAreas: "\n          'header header'\n          'left left'\n        "
    }, sx)
  }, rest, {
    children: [/*#__PURE__*/_jsx(Box, Object.assign({
      sx: Object.assign({
        gridArea: 'header'
      }, variant === 'center' && {
        width: '100%'
      }, sxHeader)
    }, restHeaderProps, {
      children: headerCmp
    })), /*#__PURE__*/_jsx(Box, Object.assign({
      sx: Object.assign({
        gridArea: 'left'
      }, isMqMd && {
        height: '100%',
        width: '100%'
      }, sxLeft)
    }, restLeftProps, {
      children: leftCmp
    })), rightCmp && !isMqMd && /*#__PURE__*/_jsx(Box, Object.assign({
      sx: Object.assign({
        gridArea: 'right'
      }, variant === 'center' && {
        display: 'none',
        gridArea: 'unset'
      }, sxRight)
    }, restRightProps, {
      children: rightCmp
    }))]
  }));
};