text: // import React from 'react';
  // import { makeStyles } from '@material-ui/core/styles';
  // import Modal from '@material-ui/core/Modal';
  // import Backdrop from '@material-ui/core/Backdrop';
  // import Fade from '@material-ui/core/Fade';
  
  // const useStyles = makeStyles((theme) => ({
  //   modal: {
  //     display: 'flex',
  //     alignItems: 'center',
  //     justifyContent: 'center',
  //   },
  //   paper: {
  //     backgroundColor: theme.palette.background.paper,
  //     border: '2px solid #000',
  //     boxShadow: theme.shadows[5],
  //     padding: theme.spacing(2, 4, 3),
  //   },
  // }));
  
  // export default function Dialogs({text}) {
  //   const classes = useStyles();
  //   const [open, setOpen] = React.useState(false);
  
  //   const handleOpen = () => {
  //     setOpen(true);
  //   };
  
  //   const handleClose = () => {
  //     setOpen(false);
  //   };
  
  //   return (
  //     <div>
  //       <button type="button" className="btn btn-success btn-lg" onClick={handleOpen}>
  //         READ MORE
  //       </button>
  //       <Modal
  //         aria-labelledby="transition-modal-title"
  //         aria-describedby="transition-modal-description"
  //         className={classes.modal}
  //         open={open}
  //         onClose={handleClose}
  //         closeAfterTransition
  //         BackdropComponent={Backdrop}
  //         BackdropProps={{
  //           timeout: 500,
  //         }}
  //       >
  //         <Fade in={open}>
  //           <div className={classes.paper}>
  //             {text}
  //           </div>
  //         </Fade>
  //       </Modal>
  //     </div>
  //   );
  // }
  
  import React from 'react';
  import Button from '@material-ui/core/Button';
  import Dialog from '@material-ui/core/Dialog';
  import DialogActions from '@material-ui/core/DialogActions';
  import DialogContent from '@material-ui/core/DialogContent';
  import DialogContentText from '@material-ui/core/DialogContentText';
  import DialogTitle from '@material-ui/core/DialogTitle';
  
  export default function Dialogs({text}) {
    const [open, setOpen] = React.useState(false);
    const [scroll, setScroll] = React.useState('paper');
  
    const handleClickOpen = (scrollType) => () => {
      setOpen(true);
      setScroll(scrollType);
    };
  
    const handleClose = () => {
      setOpen(false);
    };
  
    const descriptionElementRef = React.useRef(null);
    React.useEffect(() => {
      if (open) {
        const { current: descriptionElement } = descriptionElementRef;
        if (descriptionElement !== null) {
          descriptionElement.focus();
        }
      }
    }, [open]);
  
    return (
      <div>
        <button type="button" className="btn btn-success btn-lg" onClick={handleClickOpen('body')}>
           READ MORE
         </button>
        <Dialog
          open={open}
          onClose={handleClose}
          scroll={scroll}
          aria-labelledby="scroll-dialog-title"
          aria-describedby="scroll-dialog-description"
        >
          <DialogTitle id="scroll-dialog-title">
             Jasey Mining Service Limited
          </DialogTitle>
          <DialogContent dividers={scroll === 'body'}>
            <DialogContentText
              id="scroll-dialog-description"
              ref={descriptionElementRef}
              tabIndex={-1}
            >
              {text}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              Close
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
  