From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 front/odiparpack/app/components/Profile/Albums.js | 152 ++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 front/odiparpack/app/components/Profile/Albums.js

(limited to 'front/odiparpack/app/components/Profile/Albums.js')

diff --git a/front/odiparpack/app/components/Profile/Albums.js b/front/odiparpack/app/components/Profile/Albums.js
new file mode 100644
index 0000000..dbb6d19
--- /dev/null
+++ b/front/odiparpack/app/components/Profile/Albums.js
@@ -0,0 +1,152 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgData from 'ba-api/imgData';
+import { Grid, GridList, GridListTile, ButtonBase, Typography } from '@material-ui/core';
+import styles from './profile-jss';
+
+
+function Albums(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Grid
+        container
+        direction="row"
+        spacing={3}
+      >
+        <Grid item md={6} sm={12} xs={12}>
+          <ButtonBase
+            focusRipple
+            className={classes.image}
+            focusVisibleClassName={classes.focusVisible}
+          >
+            <GridList cellHeight={160} className={classes.gridList} cols={3}>
+              {imgData.map((tile, index) => {
+                if (index > 6) {
+                  return false;
+                }
+                return (
+                  <GridListTile key={index.toString()} cols={tile.cols || 1}>
+                    <img src={tile.img} className={classes.img} alt={tile.title} />
+                  </GridListTile>
+                );
+              })}
+            </GridList>
+            <span className={classes.imageBackdrop} />
+            <span className={classes.imageButton}>
+              <Typography
+                component="span"
+                variant="subtitle1"
+                color="inherit"
+                className={classes.imageTitle}
+              >
+                Album Number One
+                <span className={classes.imageMarked} />
+              </Typography>
+            </span>
+          </ButtonBase>
+          <ButtonBase
+            focusRipple
+            className={classes.image}
+            focusVisibleClassName={classes.focusVisible}
+          >
+            <GridList cellHeight={160} className={classes.gridListAlbum} cols={3}>
+              {imgData.map((tile, index) => {
+                if (index > 2 && index < 9) {
+                  return false;
+                }
+                return (
+                  <GridListTile key={index.toString()} cols={tile.cols || 1}>
+                    <img src={tile.img} className={classes.img} alt={tile.title} />
+                  </GridListTile>
+                );
+              })}
+            </GridList>
+            <span className={classes.imageBackdrop} />
+            <span className={classes.imageButton}>
+              <Typography
+                component="span"
+                variant="subtitle1"
+                color="inherit"
+                className={classes.imageTitle}
+              >
+                Album Number Three
+                <span className={classes.imageMarked} />
+              </Typography>
+            </span>
+          </ButtonBase>
+        </Grid>
+        <Grid item md={6} sm={12} xs={12}>
+          <ButtonBase
+            focusRipple
+            className={classes.image}
+            focusVisibleClassName={classes.focusVisible}
+          >
+            <GridList cellHeight={160} className={classes.gridList} cols={3}>
+              {imgData.map((tile, index) => {
+                if (index > 4 && index < 10) {
+                  return false;
+                }
+                return (
+                  <GridListTile key={index.toString()} cols={tile.cols || 1}>
+                    <img src={tile.img} className={classes.img} alt={tile.title} />
+                  </GridListTile>
+                );
+              })}
+            </GridList>
+            <span className={classes.imageBackdrop} />
+            <span className={classes.imageButton}>
+              <Typography
+                component="span"
+                variant="subtitle1"
+                color="inherit"
+                className={classes.imageTitle}
+              >
+                Album Number Two
+                <span className={classes.imageMarked} />
+              </Typography>
+            </span>
+          </ButtonBase>
+          <ButtonBase
+            focusRipple
+            className={classes.image}
+            focusVisibleClassName={classes.focusVisible}
+          >
+            <GridList cellHeight={160} className={classes.gridList} cols={3}>
+              {imgData.map((tile, index) => {
+                if (index % 2) {
+                  return false;
+                }
+                return (
+                  <GridListTile key={index.toString()} cols={tile.cols || 1}>
+                    <img src={tile.img} className={classes.img} alt={tile.title} />
+                  </GridListTile>
+                );
+              })}
+            </GridList>
+            <span className={classes.imageBackdrop} />
+            <span className={classes.imageButton}>
+              <Typography
+                component="span"
+                variant="subtitle1"
+                color="inherit"
+                className={classes.imageTitle}
+              >
+                Album Number Four
+                <span className={classes.imageMarked} />
+              </Typography>
+            </span>
+          </ButtonBase>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+Albums.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Albums);
-- 
cgit v1.2.3