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