@krowdy-ui/views/es/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 const styles = theme => ({
  avatar: {
    alignItems: 'center',
    border: `1px solid ${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)
  }
});

const Referent = ({
  classes,
  children,
  header
}) => /*#__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);