1import React from "react";
 2import gql from "graphql-tag";
 3import { withStyles } from "@material-ui/core/styles";
 4
 5import Avatar from "@material-ui/core/Avatar";
 6import Card from "@material-ui/core/Card";
 7import CardContent from "@material-ui/core/CardContent";
 8import CardHeader from "@material-ui/core/CardHeader";
 9import Typography from "@material-ui/core/Typography";
10
11const styles = theme => ({
12  comment: {
13    marginBottom: theme.spacing.unit
14  }
15});
16
17const Comment = withStyles(styles)(({ comment, classes }) => (
18  <Card className={classes.comment}>
19    <CardHeader
20      avatar={
21        <Avatar aria-label={comment.author.name}>
22          {comment.author.name[0].toUpperCase()}
23        </Avatar>
24      }
25      title={comment.author.name}
26      subheader={comment.author.email}
27    />
28    <CardContent>
29      <Typography component="p">{comment.message}</Typography>
30    </CardContent>
31  </Card>
32));
33
34Comment.fragment = gql`
35  fragment Comment on Comment {
36    message
37    author {
38      name
39      email
40    }
41  }
42`;
43
44export default withStyles(styles)(Comment);