update App.js, src/components/Modal/index.js, src/components/ReactMonacoEditor/index.js and src/components/Tabbar/index.js

src/App.js

@@ -7,8 +7,8 @@ function App() {
   return (
     <>
       <Card />
-      <Testt />
-      <ReactMonacoEditor />
+      {/* <Testt /> */}
+      {/* <ReactMonacoEditor /> */}
     </>
   );
 }

src/components/Modal/index.js

@@ -3,9 +3,12 @@ import React, { useState } from "react";
 import Button from "../Button";
 import Tabbar from "../Tabbar";
 
-const Modal = ({ activeTab }) => {
+const Modal = ({ activeTab, children }) => {
   const [openModal, setOpenModal] = useState(false);
 
+  // <Modal>
+  //   <div
+  // </Modal>
   return (
     <div>
       <Button
@@ -16,6 +19,7 @@ const Modal = ({ activeTab }) => {
         text={"ویرایش"}
         onClick={() => setOpenModal(true)}
       />
+      {children}
       <div
         className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all 
       ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}
@@ -33,7 +37,7 @@ const Modal = ({ activeTab }) => {
               iconHolderClassName={"mr-0"}
               onClick={() => setOpenModal(false)}
             />
-            <Tabbar />
+            <Tabbar  />
           </div>
           <div className="w-full flex flex-col items-end p-2 bg-[#e2dfdf]">
             <Button

src/components/ReactMonacoEditor/index.js

@@ -1,97 +1,105 @@
-import React from "react";
-import { render } from "react-dom";
-import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
+// import React from "react";
+// import { render } from "react-dom";
+// import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
+
+// class CodeEditor extends React.Component {
+//   constructor() {
+//     super();
+//     this.state = {
+//       code: "// type your code... \n",
+//       theme: "vs-light",
+//     };
+//   }
+
+//   onChange = (newValue) => {
+//     console.log("onChange", newValue); // eslint-disable-line no-console
+//   };
 
-class CodeEditor extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      code: "// type your code... \n",
-      theme: "vs-light",
-    };
-  }
+//   editorDidMount = (editor) => {
+//     // eslint-disable-next-line no-console
+//     console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
+//     this.editor = editor;
+//   };
 
-  onChange = (newValue) => {
-    console.log("onChange", newValue); // eslint-disable-line no-console
-  };
+//   changeEditorValue = () => {
+//     if (this.editor) {
+//       this.editor.setValue("// code changed! \n");
+//     }
+//   };
 
-  editorDidMount = (editor) => {
-    // eslint-disable-next-line no-console
-    console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
-    this.editor = editor;
-  };
+//   changeBySetState = () => {
+//     this.setState({ code: "// code changed by setState! \n" });
+//   };
 
-  changeEditorValue = () => {
-    if (this.editor) {
-      this.editor.setValue("// code changed! \n");
-    }
-  };
+//   setDarkTheme = () => {
+//     this.setState({ theme: "vs-dark" });
+//   };
 
-  changeBySetState = () => {
-    this.setState({ code: "// code changed by setState! \n" });
-  };
+//   setLightTheme = () => {
+//     this.setState({ theme: "vs-light" });
+//   };
 
-  setDarkTheme = () => {
-    this.setState({ theme: "vs-dark" });
-  };
+//   render() {
+//     const { code, theme } = this.state;
+//     const options = {
+//       selectOnLineNumbers: true,
+//       roundedSelection: false,
+//       readOnly: false,
+//       cursorStyle: "line",
+//       automaticLayout: false,
+//     };
+//     return (
+//       <div>
+//         <div>
+//           <button onClick={this.changeEditorValue} type="button">
+//             Change value
+//           </button>
+//           <button onClick={this.changeBySetState} type="button">
+//             Change by setState
+//           </button>
+//           <button onClick={this.setDarkTheme} type="button">
+//             Set dark theme
+//           </button>
+//           <button onClick={this.setLightTheme} type="button">
+//             Set light theme
+//           </button>
+//         </div>
+//         <hr />
+//         <MonacoEditor
+//           height="400"
+//           language="javascript"
+//           value={code}
+//           options={options}
+//           onChange={this.onChange}
+//           editorDidMount={this.editorDidMount}
+//           theme={theme}
+//         />
+//       </div>
+//     );
+//   }
+// }
 
-  setLightTheme = () => {
-    this.setState({ theme: "vs-light" });
-  };
+// const ReactMonacoEditor = () => {
+//   return (
+//     <div>
+//       <h2>Monaco Editor Sample (controlled mode)</h2>
+//       <CodeEditor />
+//       <hr />
+//       <h2>Another editor (uncontrolled mode)</h2>
+//       {/* <AnotherEditor /> */}
+//       <hr />
+//       <h2>Another editor (showing a diff)</h2>
+//       {/* <DiffEditor /> */}
+//     </div>
+//   );
+// };
 
-  render() {
-    const { code, theme } = this.state;
-    const options = {
-      selectOnLineNumbers: true,
-      roundedSelection: false,
-      readOnly: false,
-      cursorStyle: "line",
-      automaticLayout: false,
-    };
-    return (
-      <div>
-        <div>
-          <button onClick={this.changeEditorValue} type="button">
-            Change value
-          </button>
-          <button onClick={this.changeBySetState} type="button">
-            Change by setState
-          </button>
-          <button onClick={this.setDarkTheme} type="button">
-            Set dark theme
-          </button>
-          <button onClick={this.setLightTheme} type="button">
-            Set light theme
-          </button>
-        </div>
-        <hr />
-        <MonacoEditor
-          height="400"
-          language="javascript"
-          value={code}
-          options={options}
-          onChange={this.onChange}
-          editorDidMount={this.editorDidMount}
-          theme={theme}
-        />
-      </div>
-    );
-  }
-}
+// export default ReactMonacoEditor;
+
+import React from "react";
 
 const ReactMonacoEditor = () => {
-  return (
-    <div>
-      <h2>Monaco Editor Sample (controlled mode)</h2>
-      <CodeEditor />
-      <hr />
-      <h2>Another editor (uncontrolled mode)</h2>
-      {/* <AnotherEditor /> */}
-      <hr />
-      <h2>Another editor (showing a diff)</h2>
-      {/* <DiffEditor /> */}
-    </div>
-  );
+  return <div>ReactMonacoEditor</div>;
 };
 
 export default ReactMonacoEditor;

src/components/Tabbar/index.js

@@ -11,7 +11,7 @@ const Tabbar = ({ tabs }) => {
   const [activeTab, setActiveTab] = useState();
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col ">
       <div className="flex items-center">
         {tabs.map((tab, index) => (
           <Button