text: import { Icon } from '@iconify/react';
  import { useState } from 'react';
  import chevronUpFill from '@iconify/icons-eva/chevron-up-fill';
  import chevronDownFill from '@iconify/icons-eva/chevron-down-fill';
  // material
  import { Menu, Button, MenuItem, Typography } from '@material-ui/core';
  
  // ----------------------------------------------------------------------
  
  const SORT_BY_OPTIONS = [
    { value: 'featured', label: 'Featured' },
    { value: 'subDesc', label: 'No. of subs: High-Low' },
    { value: 'subAsc', label: 'No. of subs: Low-High' }
  ];
  
  export default function ShopProductSort() {
    const [open, setOpen] = useState(null);
  
    const handleOpen = (event) => {
      setOpen(event.currentTarget);
    };
  
    const handleClose = () => {
      setOpen(null);
    };
  
    return (
      <>
        <Button
          color="inherit"
          disableRipple
          onClick={handleOpen}
          endIcon={<Icon icon={open ? chevronUpFill : chevronDownFill} />}
        >
          Sort By:&nbsp;
          <Typography component="span" variant="subtitle2" sx={{ color: 'text.secondary' }}>
            Featured
          </Typography>
        </Button>
        <Menu
          keepMounted
          anchorEl={open}
          open={Boolean(open)}
          onClose={handleClose}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        >
          {SORT_BY_OPTIONS.map((option) => (
            <MenuItem
              key={option.value}
              onClick={handleClose}
              sx={{ typography: 'body2' }}
            >
              {option.label}
            </MenuItem>
          ))}
        </Menu>
      </>
    );
  }
  