webui: Split into multiple, smaller components

1 files changed, 44 insertions, 0 deletions

diff --git a/webui/src/Comment.js b/webui/src/Comment.js
new file mode 100644
index 00000000..a4fd1b40
--- /dev/null
+++ b/webui/src/Comment.js
@@ -0,0 +1,44 @@
+import React from "react";
+import gql from "graphql-tag";
+import { withStyles } from "@material-ui/core/styles";
+
+import Avatar from "@material-ui/core/Avatar";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardHeader from "@material-ui/core/CardHeader";
+import Typography from "@material-ui/core/Typography";
+
+const styles = theme => ({
+  comment: {
+    marginBottom: theme.spacing.unit
+  }
+});
+
+const Comment = withStyles(styles)(({ comment, classes }) => (
+  <Card className={classes.comment}>
+    <CardHeader
+      avatar={
+        <Avatar aria-label={comment.author.name}>
+          {comment.author.name[0].toUpperCase()}
+        </Avatar>
+      }
+      title={comment.author.name}
+      subheader={comment.author.email}
+    />
+    <CardContent>
+      <Typography component="p">{comment.message}</Typography>
+    </CardContent>
+  </Card>
+));
+
+Comment.fragment = gql`
+  fragment Comment on Comment {
+    message
+    author {
+      name
+      email
+    }
+  }
+`;
+
+export default withStyles(styles)(Comment);