Piston API integration for code execution fixed landing page sign in …

…button

app/api/code/route.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from "next/server";
+
+const PISTON_API = "https://emkc.org/api/v2/piston";
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+
+    const response = await fetch(`${PISTON_API}/execute`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        language: body.language,
+        version: body.version,
+        files: body.files,
+        stdin: body.stdin,
+        args: body.args,
+        compile_timeout: body.compile_timeout,
+        run_timeout: body.run_timeout,
+      }),
+    });
+
+    const result = await response.json();
+    return NextResponse.json(result);
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Failed to execute code" },
+      { status: 500 },
+    );
+  }
+}

app/page.tsx

@@ -51,7 +51,7 @@ export default function Home() {
             <div className="flex items-center space-x-4">
               <Button
                 variant="ghost"
-                className="text-gray-300 hover:text-white"
+                className="text-gray-300 hover:text-white hover:bg-gray-800"
                 onClick={() => router.push("/auth")}
               >
                 Sign In

components/code-editor.tsx

@@ -70,6 +70,67 @@ export function CodeEditor() {
   );
   const [theme, setTheme] = useState<keyof typeof themes>("VS Code Dark");
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [output, setOutput] = useState<string>("");
+  const [isRunning, setIsRunning] = useState(false);
+
+  const languageVersions = {
+    javascript: "18.15.0",
+    python: "3.10.0",
+    cpp: "10.2.0",
+  };
+
+  const languageAliases = {
+    javascript: "node",
+    python: "python",
+    cpp: "cpp",
+  };
+
+  const runCode = async () => {
+    setIsRunning(true);
+    setOutput("");
+    try {
+      const response = await fetch("/api/code", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          language: languageAliases[language],
+          version: languageVersions[language],
+          files: [
+            {
+              name:
+                language === "javascript"
+                  ? "index.js"
+                  : language === "python"
+                    ? "main.py"
+                    : "main.cpp",
+              content: code,
+            },
+          ],
+          stdin: "",
+          args: [],
+          compile_timeout: 10000,
+          run_timeout: 5000,
+        }),
+      });
+
+      const result = await response.json();
+      if (result.run?.output) {
+        setOutput(result.run.output);
+      } else if (result.compile?.output) {
+        setOutput(result.compile.output);
+      } else if (result.message) {
+        setOutput(result.message);
+      } else if (result.error) {
+        setOutput(result.error);
+      }
+    } catch (error) {
+      setOutput("Error executing code: " + (error as Error).message);
+    } finally {
+      setIsRunning(false);
+    }
+  };
 
   const toggleFullscreen = () => {
     if (!document.fullscreenElement) {
@@ -147,8 +208,10 @@ export function CodeEditor() {
                   <Button
                     variant="outline"
                     className="w-[100px] h-10 bg-background text-foreground hover:bg-muted-foreground/20 border-border"
+                    onClick={runCode}
+                    disabled={isRunning}
                   >
-                    Run
+                    {isRunning ? "Running..." : "Run"}
                   </Button>
                   <Button
                     variant="outline"
@@ -167,15 +230,68 @@ export function CodeEditor() {
                 </div>
               </div>
             </div>
-            <div className="flex-1 overflow-auto">
-              <CodeMirror
-                value={defaultCode[language]}
-                height="100%"
-                theme={themes[theme]}
-                extensions={extensions[language]}
-                onChange={(value) => setCode(value)}
-                className="h-full"
-              />
+            <div className="flex-1 flex flex-col">
+              <div className="flex-1 overflow-hidden">
+                <CodeMirror
+                  value={code}
+                  height="100%"
+                  theme={themes[theme]}
+                  extensions={extensions[language]}
+                  onChange={(value) => setCode(value)}
+                  className="h-full"
+                />
+              </div>
+              <div className="h-[250px] border-t border-border">
+                <div className="flex h-full">
+                  <div className="flex-1 border-r border-border">
+                    <div className="flex items-center px-4 py-2 border-b border-border bg-muted">
+                      <h2 className="text-sm font-medium text-foreground">
+                        Test Cases
+                      </h2>
+                    </div>
+                    <div className="p-2 space-y-2 overflow-auto h-[calc(100%-36px)]">
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 px-2 py-1">
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                          <span className="text-sm text-foreground">
+                            Case 1
+                          </span>
+                        </div>
+                        <div className="bg-muted rounded p-2">
+                          <div className="text-sm font-mono">
+                            <span className="text-muted-foreground">x = </span>
+                            <span className="text-foreground">121</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 px-2 py-1">
+                          <div className="h-2 w-2 rounded-full bg-muted"></div>
+                          <span className="text-sm text-foreground">
+                            Case 2
+                          </span>
+                        </div>
+                        <div className="bg-muted rounded p-2">
+                          <div className="text-sm font-mono">
+                            <span className="text-muted-foreground">x = </span>
+                            <span className="text-foreground">-121</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center px-4 py-2 border-b border-border bg-muted">
+                      <h2 className="text-sm font-medium text-foreground">
+                        Test Results
+                      </h2>
+                    </div>
+                    <div className="p-4 font-mono text-sm text-foreground overflow-auto h-[calc(100%-36px)]">
+                      {output || "Run your code to see the test results..."}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </ResizablePanel>