feat(playground): add submit button to the editor interface with icon

This commit is contained in:
ngc2207 2025-01-05 08:38:37 +08:00
parent 44ef62c03a
commit c30398a453

View File

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