mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-10-23 10:13:13 +02:00
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
|
import React from "react";
|
||
|
import { makeStyles, createStyles, Theme } from "@material-ui/core";
|
||
|
import M from "@material-ui/core/Modal";
|
||
|
import Backdrop from "@material-ui/core/Backdrop";
|
||
|
import Fade from "@material-ui/core/Fade";
|
||
|
|
||
|
const useStyles = makeStyles((theme: Theme) =>
|
||
|
createStyles({
|
||
|
modal: {
|
||
|
display: "flex",
|
||
|
alignItems: "center",
|
||
|
justifyContent: "center",
|
||
|
},
|
||
|
paper: {
|
||
|
backgroundColor: theme.palette.background.paper,
|
||
|
border: "2px solid " + theme.palette.primary.main,
|
||
|
boxShadow: theme.shadows[5],
|
||
|
padding: theme.spacing(2, 4, 3),
|
||
|
},
|
||
|
}),
|
||
|
);
|
||
|
|
||
|
interface IProps {
|
||
|
open: boolean;
|
||
|
close: () => void;
|
||
|
children: JSX.Element[] | JSX.Element;
|
||
|
}
|
||
|
|
||
|
export const Modal = (props: IProps): React.ReactElement => {
|
||
|
const classes = useStyles();
|
||
|
return (
|
||
|
<M
|
||
|
open={props.open}
|
||
|
onClose={props.close}
|
||
|
closeAfterTransition
|
||
|
className={classes.modal}
|
||
|
BackdropComponent={Backdrop}
|
||
|
BackdropProps={{
|
||
|
timeout: 500,
|
||
|
}}
|
||
|
>
|
||
|
<Fade in={props.open}>
|
||
|
<div className={classes.paper}>{props.children}</div>
|
||
|
</Fade>
|
||
|
</M>
|
||
|
);
|
||
|
};
|