text: import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import Card from '@material-ui/core/Card';
  import CardHeader from '@material-ui/core/CardHeader';
  import CardActions from '@material-ui/core/CardActions';
  import Avatar from '@material-ui/core/Avatar';
  import red from '@material-ui/core/colors/red';
  import Button from '@material-ui/core/Button';
  
  const styles = theme => ({
      card: {
          minWidth: 400,
          margin: '0 auto',
          marginBottom: '1em'
      },
      media: {
          height: 0,
          paddingTop: '56.25%', // 16:9
      },
      actions: {
          display: 'flex',
      },
      expand: {
          transform: 'rotate(0deg)',
          marginLeft: 'auto',
          transition: theme.transitions.create('transform', {
              duration: theme.transitions.duration.shortest,
          }),
      },
      expandOpen: {
          transform: 'rotate(180deg)',
      },
      avatar: {
          backgroundColor: red[500],
      },
  });
  
  class RecipeReviewCard extends React.Component {
      state = { expanded: false };
  
      handleExpandClick = () => {
          this.setState(state => ({ expanded: !state.expanded }));
      };
  
      render() {
          const { classes, data: { icon, name, desc, url } } = this.props;
  
          return (
              <Card className={classes.card}>
                  <CardHeader
                      avatar={
                          <Avatar aria-label="Recipe" className={classes.avatar} src={icon} />
                      }
                      title={name}
                      subheader={desc}
                  />
                  <CardActions>
                      <Button size="small" color="primary" href={url} target="_blank">
                          去瞧瞧
                      </Button>
                  </CardActions>
              </Card>
          );
      }
  }
  
  RecipeReviewCard.propTypes = {
      classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(RecipeReviewCard);
  