FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/ChatBar/FilesMenu/index.tsx

import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import PhotoSizeSelectActualIcon from '@mui/icons-material/PhotoSizeSelectActual';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';

import { makeStyles } from '@material-ui/core'


const useStyles = makeStyles({
    list: {
      background: '#fdfdfd',
    },
    listIcon: {
      marginRight: 15,
    },
})

interface IFilesMenu {
  setIsOpenMenu: any
}
const FilesMenu = ({setIsOpenMenu}:IFilesMenu) => {
  const classes = useStyles()
  const handleClose = (i: number) => {
    console.log(i, 'index of type file')
    setIsOpenMenu(false)
  }
  return (
      <MenuList className={classes.list}>
        <MenuItem onClick={() => handleClose(0)}>
          <ListItemIcon className={classes.listIcon}>
            <PhotoSizeSelectActualIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Photo or Video</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleClose(1)}>
          <ListItemIcon className={classes.listIcon}>
            <InsertDriveFileIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>File</ListItemText>
        </MenuItem>
      </MenuList>
  );
}

export default FilesMenu