@wulperstudio/cms/organisms/HeaderLayoutEditor/HeaderLayoutEditor.js

Wulper Studio Library Components CMS

import React from 'react';
import { Icon } from '@iconify/react';
import { Stack, useTheme, Grid } from '@mui/material';
import { Header } from './styled';
import { consts } from '../../helpers/consts';
import { ICONS_NAME } from '../../helpers/icons';
import { IconButtonComponent } from '../../components/IconButtonComponent';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var HeaderLayoutEditor = function HeaderLayoutEditor(props) {
  var theme = useTheme();
  return /*#__PURE__*/_jsx(Header, {
    children: /*#__PURE__*/_jsxs(Grid, {
      container: true,
      direction: "row",
      alignItems: "center",
      children: [/*#__PURE__*/_jsx(Grid, {
        item: true,
        xs: true,
        children: !props.hideBackIcon && /*#__PURE__*/_jsx("div", {
          children: /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return props.backFunction && props.backFunction();
              },
              sx: {
                boxShadow: consts.boxShadowStyle
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: ICONS_NAME.back_arrow,
              color: theme.palette.primary.main
            })
          })
        })
      }), /*#__PURE__*/_jsx(Grid, {
        item: true,
        children: /*#__PURE__*/_jsxs(Stack, {
          direction: "row",
          spacing: 2,
          children: [!props.hideUploadIcon && /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return props.onPublishFunction && props.onPublishFunction();
              },
              sx: {
                boxShadow: consts.boxShadowStyle
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: "ant-design:cloud-upload-outlined",
              color: theme.palette.primary.main
            })
          }), !props.hideSaveIcon && /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return props.callback && props.callback();
              },
              sx: {
                boxShadow: consts.boxShadowStyle
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: "heroicons-outline:save-as",
              color: theme.palette.primary.main
            })
          }), !props.hideViewIcon && /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return props.onPreviewFunction && props.onPreviewFunction();
              },
              sx: {
                boxShadow: consts.boxShadowStyle
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: "akar-icons:eye",
              color: theme.palette.primary.main
            })
          }), !props.hideMoreIcon && /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return props.onMoreIconFunction && props.onMoreIconFunction();
              },
              sx: {
                boxShadow: consts.boxShadowStyle
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: "akar-icons:more-horizontal",
              color: theme.palette.primary.main
            })
          })]
        })
      })]
    })
  });
};