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";
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}