1import { makeStyles } from '@material-ui/styles';
 2import Paper from '@material-ui/core/Paper';
 3import React from 'react';
 4import Author from '../Author';
 5import { Avatar } from '../Author';
 6import Date from '../Date';
 7import Content from '../Content';
 8
 9const useStyles = makeStyles(theme => ({
10  author: {
11    fontWeight: 'bold',
12  },
13  container: {
14    display: 'flex',
15  },
16  avatar: {
17    marginTop: 2,
18  },
19  bubble: {
20    flex: 1,
21    marginLeft: theme.spacing(1),
22    minWidth: 0,
23  },
24  header: {
25    ...theme.typography.body1,
26    color: '#444',
27    padding: '0.5rem 1rem',
28    borderBottom: '1px solid #ddd',
29    display: 'flex',
30  },
31  title: {
32    flex: 1,
33  },
34  tag: {
35    ...theme.typography.button,
36    color: '#888',
37    border: '#ddd solid 1px',
38    padding: '0 0.5rem',
39    fontSize: '0.75rem',
40    borderRadius: 2,
41    marginLeft: '0.5rem',
42  },
43  body: {
44    ...theme.typography.body2,
45    padding: '0 1rem',
46  },
47}));
48
49function Message({ op }) {
50  const classes = useStyles();
51  return (
52    <article className={classes.container}>
53      <Avatar author={op.author} className={classes.avatar} />
54      <Paper elevation={1} className={classes.bubble}>
55        <header className={classes.header}>
56          <div className={classes.title}>
57            <Author className={classes.author} author={op.author} />
58            <span> commented </span>
59            <Date date={op.createdAt} />
60          </div>
61          {op.edited && <div className={classes.tag}>Edited</div>}
62        </header>
63        <section className={classes.body}>
64          <Content markdown={op.message} />
65        </section>
66      </Paper>
67    </article>
68  );
69}
70
71export default Message;