summaryrefslogtreecommitdiffstats
path: root/front/odiparpack/app/components/Widget/AlbumWidget.js
diff options
context:
space:
mode:
Diffstat (limited to 'front/odiparpack/app/components/Widget/AlbumWidget.js')
-rw-r--r--front/odiparpack/app/components/Widget/AlbumWidget.js55
1 files changed, 55 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Widget/AlbumWidget.js b/front/odiparpack/app/components/Widget/AlbumWidget.js
new file mode 100644
index 0000000..d691361
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/AlbumWidget.js
@@ -0,0 +1,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);