1import {isValidElement} from 'react';
 2import Divider from '@mui/material/Divider';
 3import Typography from '@mui/material/Typography';
 4import MenuItem from '@mui/material/MenuItem';
 5import {Icon, ListItemIcon, ListItemText} from '@mui/material';
 6
 7export type ActionType = {
 8  divider?: boolean;
 9  label: JSX.Element | string;
10  icon?: string;
11  id: string;
12  onClick?: () => void;
13};
14
15interface Props {
16  action: ActionType;
17}
18
19const Action = (props: Props): JSX.Element => {
20  const {action} = props;
21  const {divider, onClick, id, label, icon, ...menuItemProps} = action;
22
23  if (divider) return <Divider variant="fullWidth" sx={{mt: 0, mb: 0}} />;
24  else if (isValidElement(label)) return label;
25  else if (onClick)
26    return (
27      <MenuItem id={id} onClick={onClick} {...menuItemProps}>
28        <ListItemIcon>
29          <Icon baseClassName="material-icons-outlined">{icon}</Icon>
30        </ListItemIcon>
31        <ListItemText>{label}</ListItemText>
32      </MenuItem>
33    );
34  else
35    return (
36      <Typography variant="body1" id={id}>
37        {label}
38      </Typography>
39    );
40};
41
42export default Action;