export default function Categories()

in src/app/ContosoTraders.Ui.Website/src/components/dropdowns/categories.tsx [31:80]

46 lines of code
1 McCabe index (conditional complexity)


export default function Categories(props) {
  const { categories } = props
  const history = useNavigate();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const redirectUrl = (url) => {
    history(url)
  }

  return (
    <div>
      <Button
        aria-controls="customized-menu"
        aria-haspopup="true"
        variant="contained"
        color="inherit"
        onClick={handleClick}
        className="categories-btn box-shadow-0 text-transform-capitalize fw-regular"
        startIcon={<MenuIcon />}
        endIcon={<ArrowDropDownIcon />}
        size="large"
      >
        {categories.title}
      </Button>
      <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {categories.categorylist.map((item, key) => {
          return (
            <StyledMenuItem onClick={() => redirectUrl(item.url)} key={key}>
              <ListItemIcon>
                <img src={item.img} alt="" />
              </ListItemIcon>
              <ListItemText primary={item.name} />
              <ListItemIcon className='justify-content-end'></ListItemIcon>
            </StyledMenuItem>
          )
        })}