1 files changed, 103 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/SocialMedia/Cover.js b/front/odiparpack/app/components/SocialMedia/Cover.js
new file mode 100644
index 0000000..4823f13
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/Cover.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import VerifiedUser from '@material-ui/icons/VerifiedUser';
+import Info from '@material-ui/icons/Info';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { withStyles } from '@material-ui/core/styles';
+import { Avatar, Typography, Menu, MenuItem, Button, IconButton } from '@material-ui/core';
+import styles from './jss/cover-jss';
+
+
+const optionsOpt = [
+  'Edit Profile',
+  'Change Cover',
+  'Option 1',
+  'Option 2',
+  'Option 3',
+];
+
+const ITEM_HEIGHT = 48;
+
+class Cover extends React.Component {
+  state = {
+    anchorElOpt: null,
+  };
+
+  handleClickOpt = event => {
+    this.setState({ anchorElOpt: event.currentTarget });
+  };
+
+  handleCloseOpt = () => {
+    this.setState({ anchorElOpt: null });
+  };
+
+  render() {
+    const {
+      classes,
+      avatar,
+      name,
+      desc,
+      coverImg,
+    } = this.props;
+    const { anchorElOpt } = this.state;
+    return (
+      <div className={classes.cover} style={{ backgroundImage: `url(${coverImg})` }}>
+        <div className={classes.opt}>
+          <IconButton className={classes.button} aria-label="Delete">
+            <Info />
+          </IconButton>
+          <IconButton
+            aria-label="More"
+            aria-owns={anchorElOpt ? 'long-menu' : null}
+            aria-haspopup="true"
+            className={classes.button}
+            onClick={this.handleClickOpt}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            id="long-menu"
+            anchorEl={anchorElOpt}
+            open={Boolean(anchorElOpt)}
+            onClose={this.handleCloseOpt}
+            PaperProps={{
+              style: {
+                maxHeight: ITEM_HEIGHT * 4.5,
+                width: 200,
+              },
+            }}
+          >
+            {optionsOpt.map(option => (
+              <MenuItem key={option} selected={option === 'Edit Profile'} onClick={this.handleCloseOpt}>
+                {option}
+              </MenuItem>
+            ))}
+          </Menu>
+        </div>
+        <div className={classes.content}>
+          <Avatar alt={name} src={avatar} className={classes.avatar} />
+          <Typography variant="h4" className={classes.name} gutterBottom>
+            {name}
+            <VerifiedUser className={classes.verified} />
+          </Typography>
+          <Typography className={classes.subheading} gutterBottom>
+            {desc}
+          </Typography>
+          <Button className={classes.button} size="large" variant="contained" color="secondary">
+            Add to Connection
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+Cover.propTypes = {
+  classes: PropTypes.object.isRequired,
+  avatar: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  desc: PropTypes.string.isRequired,
+  coverImg: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(Cover);