leumas-universal-crud-react/src/Editors/ACE/DraggableAceEditor.jsx

Leumas Universal CRUD to a dynamic Endpoint, Setup your own Dynamic Endpoint and Use Leumas API to send to your MONGO clusters

import React from 'react';
import Draggable from 'react-draggable';
import { ResizableBox } from 'react-resizable';
import AceEditorWrapper from './AceEditor';
import { FaCopy, FaExternalLinkAlt, FaSave, FaShareAlt, FaQuestion } from 'react-icons/fa';
import 'react-resizable/css/styles.css'; // Import default styles


const DraggableAceEditor = ({ aiResponseCode }) => {

  const copyCode = () => { /* Logic for copying code */ };
  const openInSandbox = () => { /* Logic for opening in a sandbox */ };
  const saveCode = () => { /* Logic for saving code */ };
  const giveToLeviathan = () => { /* Logic for giving code to Leviathan */ };
  const shareCode = () => { /* Logic for sharing the code snippet */ };
  const explainCode = () => { /* Logic for explaining the code */ };



  return (
    <Draggable bounds="parent">
      <ResizableBox 
        width={320} 
        height={300} 
        minConstraints={[100, 100]} 
        maxConstraints={[800, 600]} 
        className="box"
      >
        <div className="  relative w-full h-full overflow-hidden rounded-lg shadow-lg bg-white text-xs border-2 border-glow flex flex-col">
          <AceEditorWrapper
            mode="javascript"
            theme="monokai"
            value={aiResponseCode.join("\n\n")}
            name="aiResponseCode"
            editorProps={{ $blockScrolling: true }}
            setOptions={{ useWorker: false, readOnly: true }}
            fontSize={10}
            width="100%"
            height="100%"
          />
          <div className='flex justify-around items-center p-2 bg-gray-200'>
            <FaCopy onClick={copyCode} />
            <FaExternalLinkAlt onClick={openInSandbox} />
            <FaSave onClick={saveCode} />
            <FaShareAlt onClick={shareCode} />
            <FaQuestion onClick={explainCode} />
          </div>
        </div>
      </ResizableBox>
    </Draggable>
  );
}

export default DraggableAceEditor;