diff --git a/package-lock.json b/package-lock.json
index 6e8e09f..579f649 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
+ "react-icons": "^5.0.1",
"react-responsive": "^9.0.0-beta.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
@@ -19542,6 +19543,14 @@
"react": "^15.6.2 || ^16.0 || ^17"
}
},
+ "node_modules/react-icons": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+ "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -40701,6 +40710,12 @@
"integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==",
"requires": {}
},
+ "react-icons": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+ "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+ "requires": {}
+ },
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 3bd22a5..5107896 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
+ "react-icons": "^5.0.1",
"react-responsive": "^9.0.0-beta.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
diff --git a/src/components/MonacoEditor.js b/src/components/MonacoEditor.js
index 31680e3..3ceeee4 100644
--- a/src/components/MonacoEditor.js
+++ b/src/components/MonacoEditor.js
@@ -1,4 +1,10 @@
import { useState, useContext, useEffect } from "react";
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
import Editor, { DiffEditor } from "@monaco-editor/react";
import MDEditor from "@uiw/react-md-editor";
@@ -8,7 +14,7 @@ import axios from "axios";
// Loading
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
-import { makeStyles } from "@material-ui/core";
+import { Box, makeStyles } from "@material-ui/core";
import { API_URL } from "../Constants";
import { StagBinContext } from "../App";
@@ -99,6 +105,21 @@ export default function MEditor() {
const [loading, setLoading] = useState(id ? true : false);
+ // AI
+ const [open, setOpen] = useState(false);
+ const [explanation, setExplanation] = useState("");
+
+ const handleOpen = () => {
+ setOpen(true);
+ setInterval(() => {
+ setExplanation("We are still learning...");
+ }, 3000);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
useEffect(() => {
function set_data_if_exists() {
if (id) {
@@ -243,6 +264,43 @@ export default function MEditor() {
+
+
);
}