{"size": 1955, "ext": "js", "max_stars_repo_path": "client/src/components/profileNav/profileNav.js", "max_stars_repo_name": "PhilipBrowning/project3-marketplace", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/profileNav/profileNav.js", "max_issues_repo_name": "PhilipBrowning/project3-marketplace", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/profileNav/profileNav.js", "max_forks_repo_name": "PhilipBrowning/project3-marketplace", "max_forks_repo_forks_event_min_datetime": "2022-03-09T21:23:31.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-09T21:23:31.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 24.4375, "max_line_length": 90, "alphanum_fraction": 0.4757033248}
import {
  IconButton,
  Avatar,
  Box,
  Flex,
  HStack,
  VStack,
  Text,
  Menu,
  MenuButton,
  MenuDivider,
  MenuItem,
  MenuList,
} from '@chakra-ui/react';
import { FiChevronDown, FiBell } from 'react-icons/fi';
import { useHistory } from 'react-router-dom';

import Auth from '../../utils/auth';

export default function ProfileNav() {
  const history = useHistory();

  const logoutHandler = (e) => {
    e.preventDefault();

    Auth.logout();
  };
  const returnHomeHandler = () => {
    history.push('/');
  };

  return (
    <HStack spacing={{ base: '0', md: '6' }}>
      <IconButton
        size="lg"
        variant="ghost"
        aria-label="open menu"
        icon={<FiBell />}
      />
      <Flex alignItems="center">
        <Menu>
          <MenuButton
            py={2}
            transition="all 0.3s"
            _focus={{ boxShadow: 'none' }}
          >
            <HStack spacing="4">
              <Avatar
                size="md"
                src={
                  'https://storage.googleapis.com/project3-marketplace/sky-background.png'
                }
              />
              <VStack
                display={{ base: 'none', md: 'flex' }}
                alignItems="flex-start"
                spacing="1px"
                ml="2"
              >
                <Text fontSize="lg">User Name</Text>
                <Text fontSize="md" color="gray.600">
                  Normal User
                </Text>
              </VStack>
              <Box display={{ base: 'none', md: 'flex' }}>
                <FiChevronDown />
              </Box>
            </HStack>
          </MenuButton>
          <MenuList fontSize="lg" bg="white" borderColor="gray.200">
            <MenuItem onClick={returnHomeHandler}>Return Home</MenuItem>
            <MenuDivider />
            <MenuItem onClick={logoutHandler}>Sign out</MenuItem>
          </MenuList>
        </Menu>
      </Flex>
    </HStack>
  );
}
