From c30398a453675bdb093c448169b115ecda44b2d3 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Sun, 5 Jan 2025 08:38:37 +0800
Subject: [PATCH] feat(playground): add submit button to the editor interface
 with icon

---
 src/app/playground/page.tsx | 113 ++++++++++++++++++++----------------
 1 file changed, 64 insertions(+), 49 deletions(-)

diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
index 05c964e..f29447c 100644
--- a/src/app/playground/page.tsx
+++ b/src/app/playground/page.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import { Send } from "lucide-react";
 import * as monaco from "monaco-editor";
+import { Button } from "@/components/ui/button";
 import { useEffect, useRef, useState } from "react";
 import { Editor, loader } from "@monaco-editor/react";
 import { MonacoLanguageClient } from "monaco-languageclient";
@@ -78,7 +80,7 @@ export default function PlaygroundPage() {
             webSocketRef.current.close();
             webSocketRef.current = null;
           }
-          if(language in LSP_SUPPORTED_LANGUAGES){
+          if (language in LSP_SUPPORTED_LANGUAGES) {
             try {
               const languageClient = await connectToLanguageServer(
                 language,
@@ -98,54 +100,67 @@ export default function PlaygroundPage() {
 
   return (
     <div className="h-full flex flex-col">
-      <Tabs defaultValue={language as string}>
-        <ScrollArea>
-          <TabsList className="m-3">
-            <TabsTrigger
-              value="c"
-              onClick={() => setLanguage("c")}
-              disabled={language === "c"}
-            >
-              <COriginal
-                className="-ms-0.5 me-1.5"
-                size={16}
-                strokeWidth={2}
-                aria-hidden="true"
-              />
-              C
-            </TabsTrigger>
-            <TabsTrigger
-              value="cpp"
-              className="group"
-              onClick={() => setLanguage("cpp")}
-              disabled={language === "cpp"}
-            >
-              <CplusplusOriginal
-                className="-ms-0.5 me-1.5"
-                size={16}
-                strokeWidth={2}
-                aria-hidden="true"
-              />
-              C++
-            </TabsTrigger>
-            <TabsTrigger
-              value="java"
-              className="group"
-              onClick={() => setLanguage("java")}
-              disabled={language === "java"}
-            >
-              <JavaOriginal
-                className="-ms-0.5 me-1.5"
-                size={16}
-                strokeWidth={2}
-                aria-hidden="true"
-              />
-              Java
-            </TabsTrigger>
-          </TabsList>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </Tabs>
+      <div className="flex items-center justify-between">
+        <Tabs defaultValue={language as string}>
+          <ScrollArea>
+            <TabsList className="m-3">
+              <TabsTrigger
+                value="c"
+                onClick={() => setLanguage("c")}
+                disabled={language === "c"}
+              >
+                <COriginal
+                  className="-ms-0.5 me-1.5"
+                  size={16}
+                  strokeWidth={2}
+                  aria-hidden="true"
+                />
+                C
+              </TabsTrigger>
+              <TabsTrigger
+                value="cpp"
+                className="group"
+                onClick={() => setLanguage("cpp")}
+                disabled={language === "cpp"}
+              >
+                <CplusplusOriginal
+                  className="-ms-0.5 me-1.5"
+                  size={16}
+                  strokeWidth={2}
+                  aria-hidden="true"
+                />
+                C++
+              </TabsTrigger>
+              <TabsTrigger
+                value="java"
+                className="group"
+                onClick={() => setLanguage("java")}
+                disabled={language === "java"}
+              >
+                <JavaOriginal
+                  className="-ms-0.5 me-1.5"
+                  size={16}
+                  strokeWidth={2}
+                  aria-hidden="true"
+                />
+                Java
+              </TabsTrigger>
+            </TabsList>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </Tabs>
+        <div className="m-3">
+          <Button variant="outline">
+            Submit
+            <Send
+              className="-me-1 ms-2 opacity-60"
+              size={16}
+              strokeWidth={2}
+              aria-hidden="true"
+            />
+          </Button>
+        </div>
+      </div>
       <Editor
         theme="vs-dark"
         path={file.name}