Mobile-First IDE Features

import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col min-h-screen bg-gray-900 text-white">
      <header className="p-5 bg-gray-800">
        <h1 className="text-3xl font-bold">Mobile IDE</h1>
      </header>
      <main className="flex-grow p-5">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Code Editor</h2>
          <div className="bg-gray-700 p-4 rounded-lg">
            <textarea className="w-full h-64 bg-gray-600 text-white p-3 rounded" placeholder="Write your code here..."></textarea>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Output</h2>
          <div className="bg-gray-700 p-4 rounded-lg">
            <div className="h-32 bg-gray-600 p-3 rounded">Output will be displayed here.</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">File Explorer</h2>
          <div className="bg-gray-700 p-4 rounded-lg">
            <div className="space-y-2">
              <div className="flex items-center p-2 bg-gray-600 rounded">
                <span>📄 index.js</span>
              </div>
              <div className="flex items-center p-2 bg-gray-600 rounded">
                <span>📁 components</span>
              </div>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Terminal</h2>
          <div className="bg-gray-700 p-4 rounded-lg">
            <div className="h-32 bg-gray-600 p-3 rounded">Terminal output will be displayed here.</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Settings</h2>
          <div className="bg-gray-700 p-4 rounded-lg">
            <div className="space-y-2">
              <label className="block">
                <span className="text-gray-300">Theme:</span>
                <select className="mt-1 block w-full bg-gray-600 p-2 rounded">
                  <option>Dark</option>
                  <option>Light</option>
                </select>
              </label>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Version Control</h2>
          <div className="bg-gray-700 p-4 rounded-lg">
            <div className="h-32 bg-gray-600 p-3 rounded">Version control information will be displayed here.</div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Plugins</h2>
          <div className="bg-gray-700 p-4 rounded-lg">
            <div className="h-32 bg-gray-600 p-3 rounded">Manage and install plugins here.</div>
          </div>
        </section>
      </main>
      <footer className="p-5 bg-gray-800 text-center">
        <p>© 2025 Mobile IDE. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;