matthoffner/open-codetree

1import React, { useEffect, useState } from "react";2import Tabs, { TabPane } from "rc-tabs";3import { Monaco } from "./Monaco";4import { EditorValueInterface } from "../../_types/editorTypes";5 6const InputCode = ({ editorValue: parentEditorValue }: { editorValue: EditorValueInterface }) => {7  const [editorValue, setEditorValue] = useState(parentEditorValue);8  9  // Update local state when parent state updates10  useEffect(() => {11    setEditorValue(parentEditorValue);12  }, [parentEditorValue]);13 14  const dataToMap = Object.entries(editorValue.tabs);15 16  const tabPane = dataToMap.map((item, key) => (17    <TabPane tab={<div>{item[1].title}</div>} key={key}>18      <Monaco tab={item[0]} monacoLanguage={item[1].monacoLanguage} />19    </TabPane>20  ));21 22  return (23    <Tabs24      className="editor-input-tabs"25      tabPosition="top"26      tabBarGutter={16}27      defaultActiveKey="javascript"28    >29      {tabPane}30    </Tabs>31  );32};33 34const InputCodeTab = React.memo(InputCode);35 36export default InputCodeTab;37