llamacoder-julia-repl

app.js

import React, { useState } from 'react';

interface Command {
  command: string;
  output: string;
}

const JuliaREPL = () => {
  const [commands, setCommands] = useState<Command[]>([]);
  const [currentCommand, setCurrentCommand] = useState('');

  const handleCommandSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const newCommand: Command = {
      command: currentCommand,
      output: `Output for command: ${currentCommand}`,
    };
    setCommands([...commands, newCommand]);
    setCurrentCommand('');
  };

  return (
    <div className="max-w-lg mx-auto p-4 bg-white rounded-lg shadow-md">
      <h1 className="text-lg font-bold mb-2">Julia REPL</h1>
      <div className="flex flex-col h-screen">
        <div className="flex-1 overflow-y-scroll mb-4">
          {commands.map((command, index) => (
            <div key={index} className="mb-2">
              <span className="text-gray-500">{`>> ${command.command}`}</span>
              <p className="text-gray-700">{command.output}</p>
            </div>
          ))}
        </div>
        <form onSubmit={handleCommandSubmit}>
          <input
            type="text"
            value={currentCommand}
            onChange={(event) => setCurrentCommand(event.target.value)}
            className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:border-blue-500"
            placeholder="Enter a command"
          />
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring focus:border-blue-500"
          >
            Run
          </button>
        </form>
      </div>
    </div>
  );
};

export default JuliaREPL;