{"size": 1307, "ext": "js", "max_stars_repo_path": "src/components/Proposals/ProposalSort.js", "max_stars_repo_name": "Aveesh52/pokemol-web", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Proposals/ProposalSort.js", "max_issues_repo_name": "Aveesh52/pokemol-web", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Proposals/ProposalSort.js", "max_forks_repo_name": "Aveesh52/pokemol-web", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.9298245614, "max_line_length": 61, "alphanum_fraction": 0.5179801071}
import React, { useEffect } from 'react';
import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Flex,
  Icon,
  Text,
} from '@chakra-ui/react';
import { RiArrowDropDownFill } from 'react-icons/ri';
import { sortOptions } from '../../content/proposal-filters';

const ProposalSort = ({ sort, setSort }) => {
  useEffect(() => {
    setSort(sortOptions[0]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Flex direction='row' w={['100%', null, null, '50%']}>
      <Text
        ml={[0, null, null, 8]}
        mr={3}
        textTransform='uppercase'
        fontFamily='heading'
      >
        Sort By
      </Text>

      <Menu isLazy>
        <MenuButton
          textTransform='uppercase'
          fontFamily='heading'
          color='secondary.500'
          _hover={{ color: 'secondary.400' }}
        >
          {sort?.name} <Icon as={RiArrowDropDownFill} />
        </MenuButton>
        <MenuList bg='black'>
          {sortOptions.map((option) => (
            <MenuItem
              key={option.value}
              onClick={() => setSort(option)}
              value={option.value}
            >
              {option.name}
            </MenuItem>
          ))}
        </MenuList>
      </Menu>
    </Flex>
  );
};

export default ProposalSort;
