@mui-treasury/mockup/layout/ContentEx.js

"use strict";

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

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

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

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Link = _interopRequireDefault(require("@material-ui/core/Link"));

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var styles = function styles(_ref) {
  var _root;

  var breakpoints = _ref.breakpoints,
      transitions = _ref.transitions;
  return {
    root: (_root = {
      padding: 16,
      transition: transitions.create()
    }, _defineProperty(_root, breakpoints.up('sm'), {
      padding: 24,
      maxWidth: 700,
      margin: 'auto'
    }), _defineProperty(_root, breakpoints.up('md'), {
      maxWidth: 960
    }), _root)
  };
};

var ContentEx = function ContentEx(_ref2) {
  var classes = _ref2.classes;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: 'overline'
  }, "INTRODUCING"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    weight: 'bold',
    variant: 'h4',
    gutterBottom: true
  }, "Material UI ", /*#__PURE__*/_react["default"].createElement(_Link["default"], {
    underline: 'none'
  }, "Layout")), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    gutterBottom: true
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Version 3.1")), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    indent: 'small'
  }, "Layout is a group of Material-UI components that are enhanced and combined to create dynamic, easy-to-maintain and easy-to-code as much as possible."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    weight: 'bold',
    variant: 'h5',
    gutterBottom: true
  }, "Let's start with Why?"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    gutterBottom: true
  }, "I created this because", /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    component: 'div'
  }, /*#__PURE__*/_react["default"].createElement("ol", null, /*#__PURE__*/_react["default"].createElement("li", null, "It took me a lot of time to initialize dashboard layout when I have new projects and I\u2019m sure that a lot of you guys agree with me."), /*#__PURE__*/_react["default"].createElement("li", null, "Sometimes it is hard to refactor because the structure is so poor because someone isn\u2019t deeply understand what he/she was doing, as a result, rewrite the whole layout (it actually happened, at least in my experience)."), /*#__PURE__*/_react["default"].createElement("li", null, "Because we need to be fast to let others continue our work, we frequently write poor and a lot of code. However, we say we don\u2019t have time to fix them. Eventually, spend all day paying technical debts."))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    weight: 'bold',
    variant: 'h5',
    gutterBottom: true
  }, "Objectives"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "It must be easy enough to use, however still be able to adjust to compat with real word examples and usages. More importantly, it need to follow", ' ', /*#__PURE__*/_react["default"].createElement(_Link["default"], {
    target: '_blank',
    rel: "noopener",
    href: 'https://material.io/design/components/navigation-drawer.html#',
    underline: 'none'
  }, "Material specs"), ' ', "since we are 100% based on Material-UI with no other styling libraries. Last but not least, responsive is a must."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    weight: 'bold',
    variant: 'h5',
    gutterBottom: true
  }, "Solution"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Separate layout into 5 components"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    component: 'div'
  }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Root"), /*#__PURE__*/_react["default"].createElement("li", null, "Header (AppBar)"), /*#__PURE__*/_react["default"].createElement("li", null, "Nav (Drawer)"), /*#__PURE__*/_react["default"].createElement("li", null, "Content"), /*#__PURE__*/_react["default"].createElement("li", null, "Footer"))), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, "Root"), " will provide context to other components to sync states across them."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, "Behavior"), " of your layout will be controlled by using config (just a plain object) that will be injected to the Root."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, "Presets"), " is a set of predefined config that I can come up with after researching a lot of the real world websites and also the", ' ', /*#__PURE__*/_react["default"].createElement(_Link["default"], {
    href: 'https://material.io/design/components/navigation-drawer.html#usage'
  }, "official Material specs")), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null));
};

ContentEx.propTypes = {};
ContentEx.defaultProps = {};

var _default = (0, _styles.withStyles)(styles)(ContentEx);

exports["default"] = _default;