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
---
 .../app/components/SocialMedia/SideSection.js      | 209 +++++++++++++++++++++
 1 file changed, 209 insertions(+)
 create mode 100644 front/odiparpack/app/components/SocialMedia/SideSection.js

(limited to 'front/odiparpack/app/components/SocialMedia/SideSection.js')

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);
-- 
cgit v1.2.3