@krowdy-ui/views/CardConfig/CardConfig.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

var _clsx = _interopRequireDefault(require("clsx"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _ref2 = /*#__PURE__*/_react["default"].createElement(_core.Divider, null);

var CardConfig = function CardConfig(_ref) {
  var _ref$title = _ref.title,
      title = _ref$title === void 0 ? '' : _ref$title,
      _ref$subtitle = _ref.subtitle,
      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
      icon = _ref.icon,
      children = _ref.children,
      action = _ref.action,
      className = _ref.className;
  var classes = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_core.Card, {
    className: (0, _clsx["default"])(className, classes.card)
  }, /*#__PURE__*/_react["default"].createElement(_core.CardHeader, {
    action: action,
    avatar: /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
      "aria-label": "recipe",
      className: classes.avatar
    }, icon),
    className: classes.headerCard,
    subheader: /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      variant: "info1"
    }, subtitle),
    title: /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      variant: "h5"
    }, title)
  }), _ref2, /*#__PURE__*/_react["default"].createElement(_core.CardContent, {
    className: classes.content
  }, children));
};

process.env.NODE_ENV !== "production" ? CardConfig.propTypes = {
  action: _propTypes["default"].node,
  className: _propTypes["default"].string,
  icon: _propTypes["default"].node.isRequired,
  subtitle: _propTypes["default"].string,
  title: _propTypes["default"].string
} : void 0;
var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    avatar: {
      backgroundColor: theme.palette.primary[500]
    },
    card: {
      border: "1px solid ".concat(theme.palette.grey[300]),
      borderRadius: 2 * theme.shape.borderRadius,
      fontSize: 14
    },
    content: {
      align: 'left',
      color: theme.palette.grey[700],
      height: 'calc(100% - 104px)',
      padding: 0,
      width: '100%'
    },
    gridCustom: {
      margin: theme.spacing(2.5, 0, 2.5)
    },
    headerCard: {
      padding: theme.spacing(2)
    }
  };
}, {
  name: 'CardConfig'
});
var _default = CardConfig;
exports["default"] = _default;