@mui-treasury/mockup/brands/gmail/AppHeader.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _sized = require("@mui-treasury/styles/iconButton/sized");

var _row = require("@mui-treasury/styles/gutter/row");

var _google = require("@mui-treasury/styles/avatar/google");

var _core = require("@material-ui/core");

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));

var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));

var _Apps = _interopRequireDefault(require("@material-ui/icons/Apps"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var useStyles = (0, _core.makeStyles)({
  collapse: {
    marginLeft: -12,
    marginRight: 4
  },
  logo: {
    height: 40
  },
  toolbar: {
    minWidth: 768,
    minHeight: '64px !important',
    backgroundColor: '#fff',
    boxShadow: 'inset 0 -1px 0 rgba(100,121,143,0.122)'
  },
  searchInput: {
    backgroundColor: '#f1f3f4',
    height: 48,
    borderRadius: 8,
    padding: '0 8px',
    maxWidth: 720,
    flexGrow: 1
  }
});

var AppHeader = function AppHeader(_ref) {
  var collapse = _ref.collapse;
  var styles = useStyles();
  var actionStyles = (0, _sized.useSizedIconButtonStyles)({
    padding: 8,
    childSize: 24
  });
  var gutterStyles = (0, _row.useRowGutterStyles)({
    size: 8
  });
  var tinyGutterStyles = (0, _row.useRowGutterStyles)({
    size: 2,
    before: 10
  });
  var googleStyles = (0, _google.useGoogleAvatarStyles)({
    avatarSize: 32,
    ringSize: 40
  });
  var avatarStyles = (0, _sized.useSizedIconButtonStyles)({
    padding: 4,
    childSize: 32
  });
  return /*#__PURE__*/_react["default"].createElement(_core.Toolbar, {
    className: styles.toolbar
  }, /*#__PURE__*/_react["default"].createElement(_core.Box, {
    width: 238,
    display: 'flex',
    alignItems: "center"
  }, _react["default"].cloneElement(collapse, {
    className: styles.collapse
  }), /*#__PURE__*/_react["default"].createElement("img", {
    className: styles.logo,
    alt: "",
    src: "https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x.png"
  })), /*#__PURE__*/_react["default"].createElement(_core.InputBase, {
    className: styles.searchInput,
    placeholder: "Search mail",
    startAdornment: /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
      className: gutterStyles.adjacent,
      classes: actionStyles
    }, /*#__PURE__*/_react["default"].createElement(_Search["default"], null)),
    endAdornment: /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
      classes: actionStyles
    }, /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], null))
  }), /*#__PURE__*/_react["default"].createElement(_core.Box, {
    ml: "auto",
    className: tinyGutterStyles.parent
  }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    classes: actionStyles
  }, /*#__PURE__*/_react["default"].createElement(_HelpOutline["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    classes: actionStyles
  }, /*#__PURE__*/_react["default"].createElement(_Apps["default"], null))), /*#__PURE__*/_react["default"].createElement(_core.Box, {
    ml: 1,
    mr: -1.5
  }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    classes: avatarStyles
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: googleStyles.root
  }, /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
    alt: "",
    src: "https://lh3.googleusercontent.com/ogw/ADGmqu8IRt2zAKQDEDvqL5Egm51VKCxJm2eb-N8YELr3=s64-c-mo"
  })))));
};

var _default = AppHeader;
exports["default"] = _default;