summaryrefslogtreecommitdiffstats
path: root/front/odiparpack/app/components/Profile
diff options
context:
space:
mode:
Diffstat (limited to 'front/odiparpack/app/components/Profile')
-rw-r--r--front/odiparpack/app/components/Profile/About.js243
-rw-r--r--front/odiparpack/app/components/Profile/Albums.js152
-rw-r--r--front/odiparpack/app/components/Profile/Connection.js45
-rw-r--r--front/odiparpack/app/components/Profile/Favorites.js130
-rw-r--r--front/odiparpack/app/components/Profile/profile-jss.js155
5 files changed, 725 insertions, 0 deletions
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 (
+ <Grid
+ container
+ alignItems="flex-start"
+ justify="flex-start"
+ direction="row"
+ spacing={3}
+ >
+ <Grid item md={7} xs={12}>
+ <div>
+ <Timeline dataTimeline={data} />
+ </div>
+ </Grid>
+ <Grid item md={5} xs={12}>
+ {/* Profile Progress */}
+ <div className={classes.progressRoot}>
+ <Paper className={classes.styledPaper} elevation={4}>
+ <Typography className={classes.title} variant="h5" component="h3">
+ <span className={Type.light}>Profile Strength: </span>
+ <span className={Type.bold}>Intermediate</span>
+ </Typography>
+ <Grid container justify="center">
+ <Chip
+ avatar={(
+ <Avatar>
+ <Check />
+ </Avatar>
+ )}
+ label="60% Progress"
+ className={classes.chip}
+ color="primary"
+ />
+ </Grid>
+ <LinearProgress variant="determinate" className={classes.progress} value={60} />
+ </Paper>
+ </div>
+ {/* ----------------------------------------------------------------------*/}
+ {/* About Me */}
+ <PapperBlock title="About Me" whiteBg noMargin desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.">
+ <Divider className={classes.divider} />
+ <List dense className={classes.profileList}>
+ <ListItem>
+ <ListItemAvatar>
+ <Avatar>
+ <DateRange />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Born" secondary="Jan 9, 1994" />
+ </ListItem>
+ <ListItem>
+ <ListItemAvatar>
+ <Avatar>
+ <LocalPhone />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Phone" secondary="(+62)8765432190" />
+ </ListItem>
+ <ListItem>
+ <ListItemAvatar>
+ <Avatar>
+ <LocationOn />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Address" secondary="Chicendo Street no.105 Block A/5A - Barcelona, Spain" />
+ </ListItem>
+ </List>
+ </PapperBlock>
+ {/* ----------------------------------------------------------------------*/}
+ {/* My Albums */}
+ <PapperBlock title="My Albums (6)" 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>
+ <Divider className={classes.divider} />
+ <Grid container justify="center">
+ <Button color="secondary" className={classes.button}>
+ See All
+ </Button>
+ </Grid>
+ </PapperBlock>
+ {/* ----------------------------------------------------------------------*/}
+ {/* My Connection Me */}
+ <PapperBlock title="My Connection" whiteBg desc="">
+ <List dense className={classes.profileList}>
+ <ListItem button>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.orangeAvatar)}>H</Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Harry Wells" secondary="2 Mutual Connection" />
+ </ListItem>
+ <ListItem button>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}>J</Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="John DOe" secondary="8 Mutual Connection" />
+ </ListItem>
+ <ListItem button>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}>V</Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Victor Wanggai" secondary="12 Mutual Connection" />
+ </ListItem>
+ <ListItem button>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.greenAvatar)}>H</Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Baron Phoenix" secondary="10 Mutual Connection" />
+ </ListItem>
+ </List>
+ <Divider className={classes.divider} />
+ <Grid container justify="center">
+ <Button color="secondary" className={classes.button}>
+ See All
+ </Button>
+ </Grid>
+ </PapperBlock>
+ {/* ----------------------------------------------------------------------*/}
+ {/* My Interests */}
+ <PapperBlock title="My Interests" whiteBg desc="">
+ <Grid container className={classes.colList}>
+ <Grid item md={6}>
+ <ListItem>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}>
+ <AcUnit />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Snow" secondary="100 Connected" />
+ </ListItem>
+ </Grid>
+ <Grid item md={6}>
+ <ListItem>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.greenAvatar)}>
+ <Adb />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="Android" secondary="120 Connected" />
+ </ListItem>
+ </Grid>
+ <Grid item md={6}>
+ <ListItem>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}>
+ <AllInclusive />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="All Inclusive" secondary="999+ Connected" />
+ </ListItem>
+ </Grid>
+ <Grid item md={6}>
+ <ListItem>
+ <ListItemAvatar>
+ <Avatar className={classNames(classes.avatar, classes.orangeAvatar)}>
+ <AssistantPhoto />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary="My Country" secondary="99+ Connected" />
+ </ListItem>
+ </Grid>
+ </Grid>
+ </PapperBlock>
+ {/* ----------------------------------------------------------------------*/}
+ </Grid>
+ </Grid>
+ );
+ }
+}
+
+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 (
+ <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);
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 (
+ <Grid
+ container
+ alignItems="flex-start"
+ justify="space-between"
+ direction="row"
+ spacing={2}
+ className={classes.rootx}
+ >
+ {
+ datas.map((data, index) => (
+ <Grid item md={4} sm={6} xs={12} key={index.toString()}>
+ <ProfileCard
+ cover={data.cover}
+ avatar={data.avatar}
+ name={data.name}
+ title={data.title}
+ connection={data.connection}
+ isVerified={data.verified}
+ btnText="See Profile"
+ />
+ </Grid>
+ ))
+ }
+ </Grid>
+ );
+ }
+}
+
+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 = <span className={classes.bullet}>•</span>;
+ return (
+ <Grid
+ container
+ justify="center"
+ direction="row"
+ spacing={3}
+ >
+ <Grid item md={6}>
+ <PostCard
+ liked={1}
+ shared={20}
+ commented={15}
+ date="Sept, 25 2018"
+ content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
+ image={imgApi[5]}
+ avatar={avatarApi[6]}
+ name="John Doe"
+ />
+ <Divider className={classes.divider} />
+ <GeneralCard liked={1} shared={20} commented={15}>
+ <Typography className={classes.title} color="textSecondary">
+ Word of the Day
+ </Typography>
+ <Typography variant="h5" component="h2">
+ be
+ {bull}
+nev
+ {bull}
+o
+ {bull}
+lent
+ </Typography>
+ <Typography className={classes.pos} color="textSecondary">
+ adjective
+ </Typography>
+ <Typography component="p">
+ well meaning and kindly.
+ <br />
+ {'"a benevolent smile"'}
+ </Typography>
+ </GeneralCard>
+ <Divider className={classes.divider} />
+ <PostCard
+ liked={1}
+ shared={20}
+ commented={15}
+ date="Sept, 25 2018"
+ content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
+ image={imgApi[16]}
+ avatar={avatarApi[6]}
+ name="John Doe"
+ />
+ <Divider className={classes.divider} />
+ <PostCard
+ liked={90}
+ shared={10}
+ commented={22}
+ date="Sept, 15 2018"
+ content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
+ avatar={avatarApi[5]}
+ name="Jane Doe"
+ />
+ </Grid>
+ <Grid item md={6}>
+ <PostCard
+ liked={90}
+ shared={10}
+ commented={22}
+ date="Sept, 15 2018"
+ content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
+ avatar={avatarApi[4]}
+ name="Jane Doe"
+ />
+ <Divider className={classes.divider} />
+ <PostCard
+ liked={1}
+ shared={20}
+ commented={15}
+ date="Sept, 25 2018"
+ content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
+ image={imgApi[20]}
+ avatar={avatarApi[6]}
+ name="John Doe"
+ />
+ <Divider className={classes.divider} />
+ <GeneralCard liked={1} shared={20} commented={15}>
+ <Quote align="left" content="Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one." footnote="John Lennon" />
+ </GeneralCard>
+ <Divider className={classes.divider} />
+ <PostCard
+ liked={90}
+ shared={10}
+ commented={22}
+ date="Sept, 15 2018"
+ content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
+ avatar={avatarApi[1]}
+ name="Jane Doe"
+ />
+ </Grid>
+ </Grid>
+ );
+ }
+}
+
+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;
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-29 10:50:11 +0000