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

(limited to 'front/odiparpack/app/components/Header/UserMenu.js')

diff --git a/front/odiparpack/app/components/Header/UserMenu.js b/front/odiparpack/app/components/Header/UserMenu.js
new file mode 100644
index 0000000..3ec891e
--- /dev/null
+++ b/front/odiparpack/app/components/Header/UserMenu.js
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import Avatar from '@material-ui/core/Avatar';
+import IconButton from '@material-ui/core/IconButton';
+import Button from '@material-ui/core/Button';
+import Info from '@material-ui/icons/Info';
+import Warning from '@material-ui/icons/Warning';
+import Check from '@material-ui/icons/CheckCircle';
+import Error from '@material-ui/icons/RemoveCircle';
+import ExitToApp from '@material-ui/icons/ExitToApp';
+import Badge from '@material-ui/core/Badge';
+import Divider from '@material-ui/core/Divider';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Notification from '@material-ui/icons/Notifications';
+import dummy from 'ba-api/dummyContents';
+import messageStyles from 'ba-styles/Messages.scss';
+import avatarApi from 'ba-api/avatars';
+import link from 'ba-api/link';
+import styles from './header-jss';
+
+function UserMenu(props) {
+  const { classes, dark } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [openMenu, setOpenMenu] = useState(null);
+
+  const handleMenu = menu => (event) => {
+    setOpenMenu(openMenu === menu ? null : menu);
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setOpenMenu(null);
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <IconButton
+        aria-haspopup="true"
+        onClick={handleMenu('notification')}
+        color="inherit"
+        className={classNames(classes.notifIcon, dark ? classes.dark : classes.light)}
+      >
+        <Badge className={classes.badge} badgeContent={4} color="secondary">
+          <Notification />
+        </Badge>
+      </IconButton>
+      <Menu
+        id="menu-notification"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        className={classes.notifMenu}
+        PaperProps={{
+          style: {
+            width: 350,
+          },
+        }}
+        open={openMenu === 'notification'}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleClose}>
+          <div className={messageStyles.messageInfo}>
+            <ListItemAvatar>
+              <Avatar alt="User Name" src={avatarApi[0]} />
+            </ListItemAvatar>
+            <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} />
+          </div>
+        </MenuItem>
+        <Divider variant="inset" />
+        <MenuItem onClick={handleClose}>
+          <div className={messageStyles.messageInfo}>
+            <ListItemAvatar>
+              <Avatar className={messageStyles.icon}>
+                <Info />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={dummy.text.sentences} className={classes.textNotif} secondary={dummy.text.date} />
+          </div>
+        </MenuItem>
+        <Divider variant="inset" />
+        <MenuItem onClick={handleClose}>
+          <div className={messageStyles.messageSuccess}>
+            <ListItemAvatar>
+              <Avatar className={messageStyles.icon}>
+                <Check />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} />
+          </div>
+        </MenuItem>
+        <Divider variant="inset" />
+        <MenuItem onClick={handleClose}>
+          <div className={messageStyles.messageWarning}>
+            <ListItemAvatar>
+              <Avatar className={messageStyles.icon}>
+                <Warning />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} />
+          </div>
+        </MenuItem>
+        <Divider variant="inset" />
+        <MenuItem onClick={handleClose}>
+          <div className={messageStyles.messageError}>
+            <ListItemAvatar>
+              <Avatar className={messageStyles.icon}>
+                <Error />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Suspendisse pharetra pulvinar sollicitudin. Aenean ut orci eu odio cursus lobortis eget tempus velit. " className={classes.textNotif} secondary="Jan 9, 2016" />
+          </div>
+        </MenuItem>
+      </Menu>
+      <Button onClick={handleMenu('user-setting')}>
+        <Avatar
+          alt={dummy.user.name}
+          src={dummy.user.avatar}
+        />
+      </Button>
+      <Menu
+        id="menu-appbar"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={openMenu === 'user-setting'}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleClose} component={Link} to={link.profile}>My Profile</MenuItem>
+        <MenuItem onClick={handleClose} component={Link} to={link.calendar}>My Calendar</MenuItem>
+        <MenuItem onClick={handleClose} component={Link} to={link.email}>
+          My Inbox
+          <ListItemIcon>
+            <Badge className={classNames(classes.badge, classes.badgeMenu)} badgeContent={2} color="secondary" />
+          </ListItemIcon>
+        </MenuItem>
+        <Divider />
+        <MenuItem onClick={handleClose} component={Link} to="/">
+          <ListItemIcon>
+            <ExitToApp />
+          </ListItemIcon>
+          Log Out
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+}
+
+UserMenu.propTypes = {
+  classes: PropTypes.object.isRequired,
+  dark: PropTypes.bool,
+};
+
+UserMenu.defaultProps = {
+  dark: false
+};
+
+export default withStyles(styles)(UserMenu);
-- 
cgit v1.2.3