text: import { Link } from 'react-router-dom';
  import styles from './Avatar.module.css';
  import React, { useContext } from 'react';
  import { UserContext } from '../../../App';
  import { Avatar, Menu, Dropdown } from 'antd';
  import store from '../../../middleware/Redux/Store';
  import Logout from '../../Authentication/Logout/Logout';
  
  
  const UserAvatar = () => {
  
      const user = useContext(UserContext)
  
      const menu = (
          <Menu theme={store.getState().theme} className={styles.Menu}>
              <Menu.Item disabled={true} style={{fontSize: '13px'}} className={styles.Username} >
                  {user.user.email}
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item>
              <Link style={{fontSize: '13px'}}  to="/account">
                  My Account
              </Link>
              </Menu.Item>
              <Menu.Item>
              <Logout style={{fontSize: '13px'}}  color="red" />
              </Menu.Item>
          </Menu>
      )
  
      return (
          <>      
              <Dropdown overlay={menu} trigger={['click']} className={styles.Dropdown}>
                  <Avatar className={styles.Avatar}>
                      <strong>{user.user.first_name.charAt(0)}</strong>
                  </Avatar>
              </Dropdown>      
          </>
      )
  }
  
  
  export default UserAvatar;
  