@wulperstudio/cms/node/layouts/HeaderOneColumn/components/Drawer/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Drawer = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _LayoutDrawer = require("../../../LayoutDrawer");
var _consts = require("../../../../helpers/consts");
var _icons = require("../../../../helpers/icons");
var _organisms = require("../../../../organisms");
var _components = require("../../../../components");
var _jsxRuntime = require("react/jsx-runtime");
var _div, _AvatarGroupOutput, _TextMultiline;
var Drawer = exports.Drawer = function Drawer(_ref) {
  var _onClick = _ref.onClick;
  var theme = (0, _material.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LayoutDrawer.LayoutDrawer, {
    rowGap: "15px",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_organisms.HeaderFlex, {
      sx: {
        width: '100%'
      },
      backgroundColor: theme.palette.background["default"],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        justifyContent: "space-between",
        alignItems: "center",
        sx: {
          paddingBottom: '8px',
          width: '100%'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: _icons.ICONS_NAME.back_chevron,
            color: theme.palette.text.primary
          })
        }), _div || (_div = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextForLinesOutput, {
            clines: 1,
            text: "Contact info",
            fontSize: "18px",
            fontWeight: "600"
          })
        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
          iconProps: {
            onClick: function onClick() {
              return _onClick && _onClick();
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: _icons.ICONS_NAME.close,
            color: theme.palette.text.primary
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
        variant: "fullWidth",
        sx: {
          borderColor: theme.palette.background.paper
        }
      })]
    }),
    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_organisms.DrawerSection, {
        image: _consts.consts.backgroundImageRandom,
        titleText: "Company Name",
        subtitleText: "Barcelona, Spain",
        sizeAvatar: "75px"
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
        rowGap: "10px",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonOutput, {
          label: "Social profiles",
          backgroundColor: true,
          iconProps: {
            sx: {
              boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.04)'
            }
          },
          listIcon: [{
            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: _icons.ICONS_NAME.web,
              color: theme.palette.text.primary
            }),
            url: ''
          }, {
            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: _icons.ICONS_NAME.linkedin,
              color: theme.palette.text.primary
            }),
            url: ''
          }, {
            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: _icons.ICONS_NAME.instagram,
              color: theme.palette.text.primary
            }),
            url: ''
          }, {
            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: _icons.ICONS_NAME.youtube,
              color: theme.palette.text.primary
            }),
            url: ''
          }]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
          variant: "fullWidth",
          sx: {
            borderColor: theme.palette.background.paper
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ChipOutput, {
          label: "Sector",
          backgroundColor: "transparent",
          listChip: [{
            label: 'In progress'
          }, {
            label: 'lorem'
          }, {
            label: 'In progress lorem ipsum dolorem'
          }, {
            label: 'In progress iin progress'
          }],
          textColor: "#2236CB",
          backgroundColorChip: "#2236cb26"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
          variant: "fullWidth",
          sx: {
            borderColor: theme.palette.background.paper
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
          variant: "fullWidth",
          sx: {
            borderColor: theme.palette.background.paper
          }
        }), _AvatarGroupOutput || (_AvatarGroupOutput = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.AvatarGroupOutput, {
          label: "Members",
          backgroundColor: true,
          borderColor: "#fff",
          maxAvatars: 7,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
            size: "medium",
            alt: "Remy",
            src: "https://mui.com/static/images/avatar/1.jpg"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
            title: "Jefferson Farfan",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
              size: "medium",
              alt: "Doe",
              src: "https://mui.com/static/images/avatar/1.jpg"
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
            size: "medium",
            alt: "Jenny",
            src: "https://mui.com/static/images/avatar/1.jpg"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
            size: "medium",
            alt: "Alex",
            src: "https://mui.com/static/images/avatar/1.jpg"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
            size: "medium",
            alt: "Jenny",
            src: "https://mui.com/static/images/avatar/1.jpg"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
            size: "medium",
            alt: "Alex",
            src: "https://mui.com/static/images/avatar/1.jpg"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
            size: "medium",
            alt: "Alex",
            src: "https://mui.com/static/images/avatar/1.jpg"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarV2, {
            size: "medium",
            alt: "Alex",
            src: "https://mui.com/static/images/avatar/1.jpg"
          })]
        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
          variant: "fullWidth",
          sx: {
            borderColor: theme.palette.background.paper
          }
        }), _TextMultiline || (_TextMultiline = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextMultiline, {
          label: "Description",
          text: "Casa, de aspecto rural, con 3 banos de nivel intermedio, dos camas y cocina de alto nivel",
          backgroundColor: true,
          borderColor: "#fff"
        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
          variant: "fullWidth",
          sx: {
            borderColor: theme.palette.background.paper
          }
        })]
      })]
    })
  });
};