Create frontend/src/components/code-playground/CodeEditor.tsx

frontend/src/components/code-playground/CodeEditor.tsx

@@ -0,0 +1,91 @@
+// src/components/code-playground/CodeEditor.tsx
+import React, { useState } from 'react';
+import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
+import { Play, Trash2 } from 'lucide-react';
+import OutputDisplay from './OutputDisplay';
+
+const CodeEditor = () => {
+  const [code, setCode] = useState('');
+  const [output, setOutput] = useState('');
+  const [error, setError] = useState('');
+  const [isRunning, setIsRunning] = useState(false);
+
+  const handleRunCode = async () => {
+    if (!code.trim()) return;
+
+    setIsRunning(true);
+    setError('');
+    setOutput('');
+
+    try {
+      const response = await fetch('/api/execute-code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code })
+      });
+
+      const data = await response.json();
+
+      if (data.error) {
+        setError(data.error);
+      } else {
+        setOutput(data.output);
+      }
+    } catch (err) {
+      setError('Failed to execute code. Please try again.');
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  const handleClear = () => {
+    setCode('');
+    setOutput('');
+    setError('');
+  };
+
+  return (
+    <Card className="h-[600px] flex flex-col">
+      <CardHeader>
+        <CardTitle>Python Code Playground</CardTitle>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col gap-4">
+        <div className="flex-1 flex flex-col">
+          <textarea
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="Write your Python code here..."
+            className="flex-1 p-4 font-mono text-sm border rounded-lg focus:ring-2
+         
+                     focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleRunCode}
+            disabled={isRunning}
+            className="flex items-center gap-2 bg-blue-500 text-white px-4 py-2 
+                     rounded hover:bg-blue-600 disabled:bg-blue-300"
+          >
+            <Play size={16} />
+            {isRunning ? 'Running...' : 'Run Code'}
+          </button>
+          
+          <button
+            onClick={handleClear}
+            className="flex items-center gap-2 bg-gray-500 text-white px-4 py-2 
+                     rounded hover:bg-gray-600"
+          >
+            <Trash2 size={16} />
+            Clear
+          </button>
+        </div>
+
+        <OutputDisplay output={output} error={error} />
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CodeEditor;