1import React from 'react';
 2
 3import Paper from '@material-ui/core/Paper';
 4import { makeStyles } from '@material-ui/core/styles';
 5
 6import Author, { Avatar } from 'src/components/Author';
 7import Content from 'src/components/Content';
 8import Date from 'src/components/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    padding: '0.5rem 1rem',
31    borderBottom: `1px solid ${theme.palette.divider}`,
32    display: 'flex',
33    borderTopRightRadius: theme.shape.borderRadius,
34    borderTopLeftRadius: theme.shape.borderRadius,
35    backgroundColor: theme.palette.info.main,
36    color: theme.palette.info.contrastText,
37  },
38  title: {
39    flex: 1,
40  },
41  tag: {
42    ...theme.typography.button,
43    color: '#888',
44    border: '#ddd solid 1px',
45    padding: '0 0.5rem',
46    fontSize: '0.75rem',
47    borderRadius: 2,
48    marginLeft: '0.5rem',
49  },
50  body: {
51    ...theme.typography.body2,
52    padding: '0.5rem',
53  },
54}));
55
56type Props = {
57  op: AddCommentFragment | CreateFragment;
58};
59
60function Message({ op }: Props) {
61  const classes = useStyles();
62  return (
63    <article className={classes.container}>
64      <Avatar author={op.author} className={classes.avatar} />
65      <Paper elevation={1} className={classes.bubble}>
66        <header className={classes.header}>
67          <div className={classes.title}>
68            <Author className={classes.author} author={op.author} />
69            <span> commented </span>
70            <Date date={op.createdAt} />
71          </div>
72          {op.edited && <div className={classes.tag}>Edited</div>}
73        </header>
74        <section className={classes.body}>
75          <Content markdown={op.message} />
76        </section>
77      </Paper>
78    </article>
79  );
80}
81
82export default Message;