diff options
Diffstat (limited to 'front/odiparpack/app/components/SocialMedia/SideSection.js')
| -rw-r--r-- | front/odiparpack/app/components/SocialMedia/SideSection.js | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/SocialMedia/SideSection.js b/front/odiparpack/app/components/SocialMedia/SideSection.js new file mode 100644 index 0000000..1fe8d9c --- /dev/null +++ b/front/odiparpack/app/components/SocialMedia/SideSection.js @@ -0,0 +1,209 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; +import SwipeableViews from 'react-swipeable-views'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { + Grid, + Typography, + MobileStepper, + Paper, + Avatar, + Button, + Divider, + List, + ListItem, + ListItemText, +} from '@material-ui/core'; +import PapperBlock from '../PapperBlock/PapperBlock'; +import NewsCard from '../CardPaper/NewsCard'; +import ProfileCard from '../CardPaper/ProfileCard'; +import styles from './jss/socialMedia-jss'; + + +const slideData = [ + { + label: 'How to be happy :)', + imgPath: imgApi[49], + }, + { + label: '1. Work with something that you like, like…', + imgPath: imgApi[17], + }, + { + label: '2. Keep your friends close to you and hangout with them', + imgPath: imgApi[34], + }, + { + label: '3. Travel everytime that you have a chance', + imgPath: imgApi[10], + }, + { + label: '4. And contribute to Material-UI :D', + imgPath: imgApi[40] + }, +]; + +class SideSection extends React.Component { + state = { + activeStepSwipe: 0, + }; + + handleNextSwipe = () => { + this.setState(prevState => ({ + activeStepSwipe: prevState.activeStepSwipe + 1, + })); + }; + + handleBackSwipe = () => { + this.setState(prevState => ({ + activeStepSwipe: prevState.activeStepSwipe - 1, + })); + }; + + handleStepChangeSwipe = activeStepSwipe => { + this.setState({ activeStepSwipe }); + }; + + render() { + const { classes, theme } = this.props; + const { activeStepSwipe } = this.state; + + const maxStepsSwipe = slideData.length; + return ( + <div> + {/* Profile */} + <ProfileCard + cover={imgApi[43]} + avatar={avatarApi[6]} + name="John Doe" + title="UX designer" + connection={10} + btnText="My Profile" + isVerified + /> + <Divider className={classes.divider} /> + {/* ----------------------------------------------------------------------*/} + {/* News Or Ads Block */} + <Paper> + <SwipeableViews + axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'} + index={this.state.activeStepSwipe} + onChangeIndex={this.handleStepChangeSwipe} + enableMouseEvents + className={classes.sliderWrap} + > + {slideData.map((slide, index) => ( + <div className={classes.figure} key={index.toString()}> + <NewsCard + image={slide.imgPath} + title="slide.label" + > + <Typography gutterBottom className={classes.title} variant="h5" component="h2"> + {slide.label} + </Typography> + </NewsCard> + </div> + ))} + </SwipeableViews> + <MobileStepper + variant="dots" + steps={maxStepsSwipe} + position="static" + activeStep={activeStepSwipe} + className={classes.mobileStepper} + nextButton={( + <Button size="small" onClick={this.handleNextSwipe} disabled={activeStepSwipe === maxStepsSwipe - 1}> + Next + {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />} + </Button> + )} + backButton={( + <Button size="small" onClick={this.handleBackSwipe} disabled={activeStepSwipe === 0}> + {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />} + Back + </Button> + )} + /> + </Paper> + {/* ----------------------------------------------------------------------*/} + {/* People */} + <PapperBlock title="People You May Know" whiteBg noMargin desc=""> + <List component="nav" dense className={classes.profileList}> + <ListItem button className={classes.noPadding}> + <Avatar className={classNames(classes.avatar, classes.orangeAvatar)}>H</Avatar> + <ListItemText primary="Harry Wells" secondary="2 Mutual Connection" /> + <Button color="secondary" size="small">Connect</Button> + </ListItem> + <ListItem button className={classes.noPadding}> + <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}>J</Avatar> + <ListItemText primary="John Doe" secondary="8 Mutual Connection" /> + <Button color="secondary" size="small">Connect</Button> + </ListItem> + <ListItem button className={classes.noPadding}> + <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}>V</Avatar> + <ListItemText primary="Victor Wanggai" secondary="12 Mutual Connection" /> + <Button color="secondary" size="small">Connect</Button> + </ListItem> + <ListItem button className={classes.noPadding}> + <Avatar className={classNames(classes.avatar, classes.greenAvatar)}>H</Avatar> + <ListItemText primary="Baron Phoenix" secondary="10 Mutual Connection" /> + <Button color="secondary" size="small">Connect</Button> + </ListItem> + </List> + <Divider className={classes.divider} /> + <Grid container justify="center"> + <Button color="secondary" className={classes.button}> + See All + </Button> + </Grid> + </PapperBlock> + {/* ----------------------------------------------------------------------*/} + {/* Trending */} + <PapperBlock title="Trends For You" whiteBg desc=""> + <List dense className={classes.trendingList}> + <ListItem className={classes.noPadding}> + <a href="#" className={classes.link}>#Lorem ipsum dolor</a> + <ListItemText secondary="2987 Posts" /> + </ListItem> + <ListItem className={classes.noPadding}> + <a href="#" className={classes.link}>#Aliquam venenatis</a> + <ListItemText secondary="2345 Posts" /> + </ListItem> + <ListItem className={classes.noPadding}> + <a href="#" className={classes.link}>#Nam sollicitudin</a> + <ListItemText secondary="1234 Posts" /> + </ListItem> + <ListItem className={classes.noPadding}> + <a href="#" className={classes.link}>#Cras convallis</a> + <ListItemText secondary="6789 Connection" /> + </ListItem> + <ListItem className={classes.noPadding}> + <a href="#" className={classes.link}>#Aenean sit amet</a> + <ListItemText secondary="2987 Connection" /> + </ListItem> + <ListItem className={classes.noPadding}> + <a href="#" className={classes.link}>#Quisque</a> + <ListItemText secondary="1456 Connection" /> + </ListItem> + <ListItem className={classes.noPadding}> + <a href="#" className={classes.link}>#Lorem ipusm dolor</a> + <ListItemText secondary="2987 Connection" /> + </ListItem> + </List> + </PapperBlock> + </div> + ); + } +} + +SideSection.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(SideSection); |