leumas-private-shared/src/Editors/ACE/DraggableAceEditor.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

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;