blob: d691361c900e1f04c05b2d655ab467cbe92bbabf (
plain)
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
51
52
53
54
55
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import InfoIcon from '@material-ui/icons/Info';
import imgData from 'ba-api/imgData';
import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core';
import PapperBlock from '../PapperBlock/PapperBlock';
import styles from './widget-jss';
class AlbumWidget extends React.Component {
render() {
const { classes } = this.props;
return (
<PapperBlock noMargin title="My Albums (4)" whiteBg desc="">
<div className={classes.albumRoot}>
<GridList cellHeight={180} className={classes.gridList}>
{
imgData.map((tile, index) => {
if (index >= 4) {
return false;
}
return (
<GridListTile key={index.toString()}>
<img src={tile.img} className={classes.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
subtitle={(
<span>
by:
{tile.author}
</span>
)}
actionIcon={(
<IconButton className={classes.icon}>
<InfoIcon />
</IconButton>
)}
/>
</GridListTile>
);
})
}
</GridList>
</div>
</PapperBlock>
);
}
}
AlbumWidget.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(AlbumWidget);
|
