image componennt

component.md

import React, { useState, useCallback } from 'react';
import { 
  Card, CardActionArea, CardMedia, CardContent, 
  Typography, Icon 
 } from '@material-ui/core';
import classnames from 'classnames';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  card: {
    maxWidth: 345,
  },
  cardContent: {
    position: 'relative'
  },
  cardHeader: {
    position: 'absolute',
    zIndex: 1,
    left: '75%'
  },
  footer: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '8px 16px !important'
  },
  icon: {
    margin: 8,
    color: 'white',
    cursor: 'pointer',
    transition: 'color 0.25s ease'
  },
  favorite: {
    color: 'red',
  },
  shoppingCart: {
    color: 'blue'
  }
});

export const Image = () => {
  const classes = useStyles();

  const [favorite, setFavorite] = useState(false);
  const [shoppingCrat, setShoppingCart] = useState(false);

  const clickFavorite = useCallback(
    () => {
      setFavorite(!favorite);
    },
    [favorite]
  );

  const clickShoppingCart = useCallback(
    () => {
      setShoppingCart(!shoppingCrat);
    },
    [shoppingCrat]
  );

  return (
    <Card className={classes.card}>
      <div className={classes.cardContent}>
        <div className={classes.cardHeader}> 
          {/*https://material-ui.com/components/icons/#icon-font-icons*/}
          <Icon 
            className={
              classnames(
                [`${classes.icon}`],
                {
                  [`${classes.favorite}`]: favorite
                }
              )
            } 
            onClick={clickFavorite}
          >
            favorite
          </Icon>
          <Icon 
            className={
              classnames(
                [`${classes.icon}`],
                {
                  [`${classes.shoppingCart}`]: shoppingCrat
                }
              )
            } 
            onClick={clickShoppingCart}
          >
            shopping_cart
          </Icon>
        </div>
        <div>
          <CardActionArea>
            <CardMedia
              component="img"
              alt="Contemplative Reptile"
              height="140"
              image="http://lorempixel.com/400/200/sports/"
              title="Contemplative Reptile"
            />
          </CardActionArea>
          <CardContent className={classes.footer}>
            <Typography gutterBottom variant="h5" component="h2">
              name
            </Typography>
            <Typography variant="body1">
              text
            </Typography>
          </CardContent>
        </div>
      </div>
    </Card>
  )
}