coder/site/src/components/TableRowMenu/TableRowMenu.tsx

import IconButton from "@mui/material/IconButton";
import Menu, { MenuProps } from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { MouseEvent, useState } from "react";

export interface TableRowMenuProps<TData> {
  data: TData;
  menuItems: Array<{
    label: React.ReactNode;
    disabled: boolean;
    onClick: (data: TData) => void;
  }>;
}

export const TableRowMenu = <T,>({
  data,
  menuItems,
}: TableRowMenuProps<T>): JSX.Element => {
  const [anchorEl, setAnchorEl] = useState<MenuProps["anchorEl"]>(null);

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

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

  return (
    <>
      <IconButton
        size="small"
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {menuItems.map((item, index) => (
          <MenuItem
            key={index}
            disabled={item.disabled}
            onClick={() => {
              handleClose();
              item.onClick(data);
            }}
          >
            {item.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  );
};