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