All files / src/components Album.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 
 
 
 
 
10x
 
 
 
 
 
 
 
 
 
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from "react";
import { GridListTile, GridListTileBar } from "material-ui/GridList";
import { withStyles } from "material-ui/styles";
import IconButton from "material-ui/IconButton";
import InfoIcon from "material-ui-icons/Info";
 
const styles = theme => ({
  tile: {
    margin: theme.spacing.unit,
    overflow: "hidden",
    height: 300,
    width: 300
  }
});
 
export class Album extends Component {
  render() {
    const { classes, album = {}, handleClick } = this.props;
    return (
      <GridListTile className={classes.tile} key={album.id}>
        <img
          src={album.images && album.images[1].url}
          alt={album.name}
          //href={album.external_urls.spotify}
        />
        <GridListTileBar
          title={
            <a
              style={{ color: "white" }}
              href={album.external_urls && album.external_urls.spotify}
            >
              {album.name}
            </a>
          }
          subtitle={<span>by: {album.artists && album.artists[0].name}</span>}
          actionIcon={
            <div>
              <IconButton onClick={() => handleClick(album)}>
                <InfoIcon color="rgba(255, 255, 255, 0.54)" />
              </IconButton>
            </div>
          }
        />
      </GridListTile>
    );
  }
}
 
export default withStyles(styles)(Album);