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

React components that implement Google's Material Design.

import React from 'react';
import { withStyles, Card, CardContent, Avatar } from '@material-ui/core';
import { Person as PersonIcon } from '@material-ui/icons';
import PropTypes from 'prop-types';
export var styles = function styles(theme) {
  return {
    avatar: {
      alignItems: 'center',
      border: "1px solid ".concat(theme.palette.grey[400]),
      borderRadius: '50%',
      display: 'flex',
      height: 28,
      justifyContent: 'center',
      width: 28
    },
    container: {
      '&:last-child': {
        paddingBottom: theme.spacing(1)
      },
      display: 'flex',
      padding: theme.spacing(1)
    },
    content: {
      flex: 1,
      marginLeft: theme.spacing(1)
    },
    list: {
      display: 'grid',
      gap: '4px',
      gridTemplateColumns: '1fr 1fr',
      marginTop: theme.spacing(.5)
    },
    personIcon: {
      fontSize: 13
    },
    root: {},
    subtitle: {
      fontWeight: 500,
      margin: theme.spacing(1, 0)
    }
  };
};

var Referent = function Referent(_ref) {
  var classes = _ref.classes,
      children = _ref.children,
      header = _ref.header;
  return /*#__PURE__*/React.createElement(Card, {
    className: classes.root,
    variant: "outlined"
  }, /*#__PURE__*/React.createElement(CardContent, {
    className: classes.container
  }, /*#__PURE__*/React.createElement(Avatar, {
    className: classes.avatar
  }, /*#__PURE__*/React.createElement(PersonIcon, {
    className: classes.personIcon
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.content
  }, header, /*#__PURE__*/React.createElement("div", {
    className: classes.list
  }, children))));
};

process.env.NODE_ENV !== "production" ? Referent.propTypes = {
  children: PropTypes.element,
  classes: PropTypes.object,
  header: PropTypes.node
} : void 0;
export default withStyles(styles, {
  name: 'Referent'
})(Referent);