ITutorial in react

src/ui/React/Overview.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+
+import makeStyles from "@mui/styles/makeStyles";
+import Box from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import Fab from "@mui/material/Fab";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+const useStyles = makeStyles({
+  nobackground: {
+    backgroundColor: "#0000",
+  },
+});
+
+interface IProps {
+  children: JSX.Element[] | JSX.Element | React.ReactElement[] | React.ReactElement;
+}
+
+export function Overview({ children }: IProps): React.ReactElement {
+  const [open, setOpen] = useState(true);
+  const classes = useStyles();
+  return (
+    <div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
+      <Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
+        <Collapse in={open}>{children}</Collapse>
+        <Box display="flex" justifyContent="flex-end">
+          <Fab classes={{ root: classes.nobackground }} onClick={() => setOpen((old) => !old)}>
+            <VisibilityOffIcon color="primary" />
+          </Fab>
+        </Box>
+      </Box>
+    </div>
+  );
+}