Universal Online Code Editor & AI Compiler Console

import React, { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState(['Build Next.js app', 'Explore React 19', 'Ship to Production']);
  const [input, setInput] = useState('');

  const addTodo = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    setTodos([...todos, input.trim()]);
    setInput('');
    setCount(c => c + 1);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-6 font-sans">
      <div className="max-w-md w-full bg-slate-900 border border-cyan-500/30 rounded-2xl p-6 shadow-2xl">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-cyan-500/20 border border-cyan-500/40 flex items-center justify-center text-2xl">
            ⚛️
          </div>
          <div>
            <h1 className="text-xl font-bold text-white">React 19 Interactive</h1>
            <p className="text-xs text-cyan-400">Live JSX Transpilation in Browser</p>
          </div>
        </div>

        <div className="bg-slate-950/80 rounded-xl p-4 border border-slate-800 text-center mb-5">
          <div className="text-xs uppercase text-slate-400 font-bold mb-1">Actions Count</div>
          <div className="text-4xl font-black text-cyan-400">{count}</div>
        </div>

        <form onSubmit={addTodo} className="flex gap-2 mb-4">
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            placeholder="Add new task..."
            className="flex-1 bg-slate-800 border border-slate-700 rounded-xl px-3 py-2 text-sm text-white outline-none focus:border-cyan-400"
          />
          <button type="submit" className="px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 font-bold text-sm rounded-xl text-white hover:opacity-90 transition">
            + Add
          </button>
        </form>

        <div className="space-y-2">
          {todos.map((t, idx) => (
            <div key={idx} className="flex items-center justify-between p-2.5 rounded-lg bg-slate-800/50 border border-slate-800 text-sm">
              <span>{t}</span>
              <span className="text-xs text-cyan-400">"color:#8b949e">#0{idx + 1}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}