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

React components that implement Google's Material Design.

import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Avatar, Card, CardContent, CardHeader, Divider, makeStyles, Typography } from '@krowdy-ui/core';

var _ref2 = /*#__PURE__*/React.createElement(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.createElement(Card, {
    className: clsx(className, classes.card)
  }, /*#__PURE__*/React.createElement(CardHeader, {
    action: action,
    avatar: /*#__PURE__*/React.createElement(Avatar, {
      "aria-label": "recipe",
      className: classes.avatar
    }, icon),
    className: classes.headerCard,
    subheader: /*#__PURE__*/React.createElement(Typography, {
      variant: "info1"
    }, subtitle),
    title: /*#__PURE__*/React.createElement(Typography, {
      variant: "h5"
    }, title)
  }), _ref2, /*#__PURE__*/React.createElement(CardContent, {
    className: classes.content
  }, children));
};

process.env.NODE_ENV !== "production" ? CardConfig.propTypes = {
  action: PropTypes.node,
  className: PropTypes.string,
  icon: PropTypes.node.isRequired,
  subtitle: PropTypes.string,
  title: PropTypes.string
} : void 0;
var useStyles = 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'
});
export default CardConfig;