aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/bug/Message.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src/bug/Message.tsx')
-rw-r--r--webui/src/bug/Message.tsx78
1 files changed, 78 insertions, 0 deletions
diff --git a/webui/src/bug/Message.tsx b/webui/src/bug/Message.tsx
new file mode 100644
index 00000000..33e0f1da
--- /dev/null
+++ b/webui/src/bug/Message.tsx
@@ -0,0 +1,78 @@
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+import Author from '../Author';
+import { Avatar } from '../Author';
+import Content from '../Content';
+import Date from '../Date';
+import { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
+
+const useStyles = makeStyles(theme => ({
+ author: {
+ fontWeight: 'bold',
+ },
+ container: {
+ display: 'flex',
+ },
+ avatar: {
+ marginTop: 2,
+ },
+ bubble: {
+ flex: 1,
+ marginLeft: theme.spacing(1),
+ minWidth: 0,
+ },
+ header: {
+ ...theme.typography.body1,
+ color: '#444',
+ padding: '0.5rem 1rem',
+ borderBottom: '1px solid #ddd',
+ display: 'flex',
+ },
+ title: {
+ flex: 1,
+ },
+ tag: {
+ ...theme.typography.button,
+ color: '#888',
+ border: '#ddd solid 1px',
+ padding: '0 0.5rem',
+ fontSize: '0.75rem',
+ borderRadius: 2,
+ marginLeft: '0.5rem',
+ },
+ body: {
+ ...theme.typography.body2,
+ padding: '0 1rem',
+ },
+}));
+
+type Props = {
+ op: AddCommentFragment | CreateFragment;
+};
+
+function Message({ op }: Props) {
+ const classes = useStyles();
+ return (
+ <article className={classes.container}>
+ <Avatar author={op.author} className={classes.avatar} />
+ <Paper elevation={1} className={classes.bubble}>
+ <header className={classes.header}>
+ <div className={classes.title}>
+ <Author className={classes.author} author={op.author} />
+ <span> commented </span>
+ <Date date={op.createdAt} />
+ </div>
+ {op.edited && <div className={classes.tag}>Edited</div>}
+ </header>
+ <section className={classes.body}>
+ <Content markdown={op.message} />
+ </section>
+ </Paper>
+ </article>
+ );
+}
+
+export default Message;