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/About.js | 243 +++++++++++++++++++++ front/odiparpack/app/components/Profile/Albums.js | 152 +++++++++++++ .../app/components/Profile/Connection.js | 45 ++++ .../odiparpack/app/components/Profile/Favorites.js | 130 +++++++++++ .../app/components/Profile/profile-jss.js | 155 +++++++++++++ 5 files changed, 725 insertions(+) create mode 100644 front/odiparpack/app/components/Profile/About.js create mode 100644 front/odiparpack/app/components/Profile/Albums.js create mode 100644 front/odiparpack/app/components/Profile/Connection.js create mode 100644 front/odiparpack/app/components/Profile/Favorites.js create mode 100644 front/odiparpack/app/components/Profile/profile-jss.js (limited to 'front/odiparpack/app/components/Profile') diff --git a/front/odiparpack/app/components/Profile/About.js b/front/odiparpack/app/components/Profile/About.js new file mode 100644 index 0000000..9872a47 --- /dev/null +++ b/front/odiparpack/app/components/Profile/About.js @@ -0,0 +1,243 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import LocalPhone from '@material-ui/icons/LocalPhone'; +import DateRange from '@material-ui/icons/DateRange'; +import LocationOn from '@material-ui/icons/LocationOn'; +import InfoIcon from '@material-ui/icons/Info'; +import Check from '@material-ui/icons/Check'; +import AcUnit from '@material-ui/icons/AcUnit'; +import Adb from '@material-ui/icons/Adb'; +import AllInclusive from '@material-ui/icons/AllInclusive'; +import AssistantPhoto from '@material-ui/icons/AssistantPhoto'; +import imgData from 'ba-api/imgData'; +import Type from 'ba-styles/Typography.scss'; +import { + Grid, + Paper, + Typography, + List, + ListItem, + ListItemText, + ListItemAvatar, + Avatar, + Button, + LinearProgress, + Divider, + Chip, + GridList, + GridListTile, + GridListTileBar, + IconButton, +} from '@material-ui/core'; +import Timeline from '../SocialMedia/Timeline'; +import PapperBlock from '../PapperBlock/PapperBlock'; +import styles from './profile-jss'; + + +class About extends React.Component { + render() { + const { classes, data } = this.props; + return ( + + +
+ +
+ + + {/* Profile Progress */} +
+ + + Profile Strength: + Intermediate + + + + + + )} + label="60% Progress" + className={classes.chip} + color="primary" + /> + + + +
+ {/* ----------------------------------------------------------------------*/} + {/* About Me */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* ----------------------------------------------------------------------*/} + {/* My Albums */} + +
+ + { + imgData.map((tile, index) => { + if (index >= 4) { + return false; + } + return ( + + {tile.title} + +by: + {tile.author} + + )} + actionIcon={( + + + + )} + /> + + ); + }) + } + +
+ + + + + + {/* ----------------------------------------------------------------------*/} + {/* My Connection Me */} + + + + + H + + + + + + J + + + + + + V + + + + + + H + + + + + + + + + + {/* ----------------------------------------------------------------------*/} + {/* My Interests */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* ----------------------------------------------------------------------*/} + + + ); + } +} + +About.propTypes = { + classes: PropTypes.object.isRequired, + data: PropTypes.object.isRequired +}; + +export default withStyles(styles)(About); 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 ( +
+ + + + + {imgData.map((tile, index) => { + if (index > 6) { + return false; + } + return ( + + {tile.title} + + ); + })} + + + + + Album Number One + + + + + + + {imgData.map((tile, index) => { + if (index > 2 && index < 9) { + return false; + } + return ( + + {tile.title} + + ); + })} + + + + + Album Number Three + + + + + + + + + {imgData.map((tile, index) => { + if (index > 4 && index < 10) { + return false; + } + return ( + + {tile.title} + + ); + })} + + + + + Album Number Two + + + + + + + {imgData.map((tile, index) => { + if (index % 2) { + return false; + } + return ( + + {tile.title} + + ); + })} + + + + + Album Number Four + + + + + + +
+ ); +} + +Albums.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Albums); diff --git a/front/odiparpack/app/components/Profile/Connection.js b/front/odiparpack/app/components/Profile/Connection.js new file mode 100644 index 0000000..beef128 --- /dev/null +++ b/front/odiparpack/app/components/Profile/Connection.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import datas from 'ba-api/connectionData'; +import { Grid } from '@material-ui/core'; +import ProfileCard from '../CardPaper/ProfileCard'; +import styles from './profile-jss'; + +class Connection extends React.Component { + render() { + const { classes } = this.props; + return ( + + { + datas.map((data, index) => ( + + + + )) + } + + ); + } +} + +Connection.propTypes = { + classes: PropTypes.object.isRequired +}; + +export default withStyles(styles)(Connection); diff --git a/front/odiparpack/app/components/Profile/Favorites.js b/front/odiparpack/app/components/Profile/Favorites.js new file mode 100644 index 0000000..ac6b506 --- /dev/null +++ b/front/odiparpack/app/components/Profile/Favorites.js @@ -0,0 +1,130 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { Typography, Grid, Divider } from '@material-ui/core'; +import GeneralCard from '../CardPaper/GeneralCard'; +import PostCard from '../CardPaper/PostCard'; +import Quote from '../Quote/Quote'; + + +const styles = theme => ({ + divider: { + margin: `${theme.spacing(3)}px 0`, + }, +}); + +class Favorites extends React.Component { + render() { + const { classes } = this.props; + const bull = •; + return ( + + + + + + + Word of the Day + + + be + {bull} +nev + {bull} +o + {bull} +lent + + + adjective + + + well meaning and kindly. +
+ {'"a benevolent smile"'} + + + + + + + + + + + + + + + + + + + + ); + } +} + +Favorites.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Favorites); diff --git a/front/odiparpack/app/components/Profile/profile-jss.js b/front/odiparpack/app/components/Profile/profile-jss.js new file mode 100644 index 0000000..32c3308 --- /dev/null +++ b/front/odiparpack/app/components/Profile/profile-jss.js @@ -0,0 +1,155 @@ +import { deepOrange, deepPurple, pink, green } from '@material-ui/core/colors'; +const styles = theme => ({ + profileList: { + padding: 0, + '& li': { + paddingLeft: 0 + } + }, + avatar: { + margin: 10, + }, + orangeAvatar: { + backgroundColor: deepOrange[500], + }, + purpleAvatar: { + backgroundColor: deepPurple[500], + }, + pinkAvatar: { + backgroundColor: pink[500], + }, + greenAvatar: { + backgroundColor: green[500], + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + albumRoot: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + backgroundColor: theme.palette.background.paper, + }, + gridList: { + width: 500, + height: 'auto', + }, + icon: { + color: 'rgba(255, 255, 255, 0.54)', + }, + img: { + maxWidth: 'none' + }, + root: theme.mixins.gutters({ + paddingTop: 16, + paddingBottom: 16, + marginTop: theme.spacing(3), + }), + progressRoot: { + marginBottom: 30, + }, + styledPaper: { + backgroundColor: theme.palette.secondary.main, + padding: 20, + '& $title, & $subtitle': { + color: theme.palette.common.white + } + }, + progress: { + marginTop: 20, + background: theme.palette.secondary.dark, + '& div': { + background: theme.palette.primary.light, + } + }, + chip: { + marginTop: 20, + background: theme.palette.primary.light, + '& div': { + background: green[500], + color: theme.palette.common.white + } + }, + colList: { + '& li': { + padding: '10px 0' + }, + '& $avatar': { + margin: 0 + } + }, + title: {}, + subtitle: {}, + rootAlbum: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + }, + image: { + position: 'relative', + height: 'auto', + boxShadow: theme.shadows[6], + borderRadius: 2, + overflow: 'hidden', + marginBottom: 30, + width: '100% !important', // Overrides inline-style + '&:hover, &$focusVisible': { + zIndex: 1, + '& $imageBackdrop': { + opacity: 0.6, + }, + '& $imageMarked': { + opacity: 0, + }, + '& $imageTitle': { + border: '4px solid currentColor', + }, + }, + }, + imageButton: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: theme.palette.common.white, + }, + imageBackdrop: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + backgroundColor: theme.palette.common.black, + opacity: 0.4, + transition: theme.transitions.create('opacity'), + }, + imageTitle: { + position: 'relative', + padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`, + }, + imageMarked: { + height: 3, + width: 18, + backgroundColor: theme.palette.common.white, + position: 'absolute', + bottom: -2, + left: 'calc(50% - 9px)', + transition: theme.transitions.create('opacity'), + }, + focusVisible: {}, + gridListAlbum: { + height: 'auto', + background: theme.palette.common.black + }, + subheader: { + width: '100%', + }, +}); + +export default styles; -- cgit v1.2.3