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