61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
"use client";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useState } from "react";
|
|
import Editor from "@monaco-editor/react";
|
|
|
|
export default function CodeEditor() {
|
|
const [code, setCode] = useState("// Write your Java code here");
|
|
const [output, setOutput] = useState("");
|
|
|
|
const handleRunCode = async () => {
|
|
try {
|
|
const response = await fetch("/api/run-code", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ code }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
setOutput(result.output || result.error);
|
|
} catch (error) {
|
|
console.error("Error running code:", error);
|
|
setOutput(error.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen w-full">
|
|
<div className="flex-1 bg-background p-6">
|
|
<div className="flex h-full flex-col gap-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">Java Code Editor</h1>
|
|
<Button onClick={handleRunCode}>Run</Button>
|
|
</div>
|
|
<div className="flex-1 rounded-md border border-input">
|
|
<Editor
|
|
height="100%"
|
|
defaultLanguage="java"
|
|
defaultValue="// Write your Java code here"
|
|
value={code}
|
|
onChange={(value) => setCode(value || "")}
|
|
className="h-full w-full p-4 text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-1/2 flex-col bg-muted p-6">
|
|
<h2 className="text-xl font-bold">Output</h2>
|
|
<div className="flex-1 rounded-md border border-input p-4 text-sm">
|
|
<pre className="whitespace-pre-wrap">{output}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|