src/Sidebar.tsx

import React from 'react';

interface SidebarProps {
  recursiveSteps: number;
  addRecursiveStep: () => void;
  removeRecursiveStep: () => void;
  inputData: string;
  handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
}

const Sidebar: React.FC<SidebarProps> = ({
  recursiveSteps,
  addRecursiveStep,
  removeRecursiveStep,
  inputData,
  handleInputChange,
}) => {
  return (
    <div className="sidebar">
      <div className="sidebar-section">
        <h3>Recursive Steps</h3>
        <div>
          <input
            type="number"
            value={recursiveSteps}
            min={1}
            onChange={(e) => setRecursiveSteps(parseInt(e.target.value))}
          />
          <button onClick={addRecursiveStep}>+</button>
          <button onClick={removeRecursiveStep}>-</button>
        </div>
      </div>
      <div className="sidebar-section">
        <h3>Input Data</h3>
        <textarea value={inputData} onChange={handleInputChange} />
      </div>
    </div>
  );
};

export default Sidebar;