@krowdy-ui/views/es/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 _ref = /*#__PURE__*/React.createElement(Divider, null);

const CardConfig = ({
  title = '',
  subtitle = '',
  icon,
  children,
  action,
  className
}) => {
  const 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)
  }), _ref, /*#__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;
const useStyles = makeStyles(theme => ({
  avatar: {
    backgroundColor: theme.palette.primary[500]
  },
  card: {
    border: `1px solid ${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;