aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/bug/Message.tsx
diff options
context:
space:
mode:
authorMichael Muré <batolettre@gmail.com>2020-02-13 00:05:04 +0100
committerGitHub <noreply@github.com>2020-02-13 00:05:04 +0100
commit0066f3d8c278558eeac70d3cd7ca21c360014346 (patch)
treeca40e95496b90837fb0e7a5ff4ac5b966ceba6ec /webui/src/bug/Message.tsx
parent269036bdf25af8fefbca24b7455c4e0b7d1d72b5 (diff)
parentab09c03a1e55d5c2e35f332f0e5f6335c1670427 (diff)
downloadgit-bug-0066f3d8c278558eeac70d3cd7ca21c360014346.tar.gz
Merge pull request #323 from MichaelMure/webui/typescript
Webui/typescript
Diffstat (limited to 'webui/src/bug/Message.tsx')
-rw-r--r--webui/src/bug/Message.tsx79
1 files changed, 79 insertions, 0 deletions
diff --git a/webui/src/bug/Message.tsx b/webui/src/bug/Message.tsx
new file mode 100644
index 00000000..c8d0710d
--- /dev/null
+++ b/webui/src/bug/Message.tsx
@@ -0,0 +1,79 @@
+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;