feat: add web editor and terminal panels

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-02 18:35:17 +08:00
parent 0f634981b5
commit 062cde88f8
4 changed files with 116 additions and 20 deletions
@@ -0,0 +1,39 @@
+import Editor, { type OnValidate } from "@monaco-editor/react";
+import { useState } from "react";
+
+import type { MockFileNode } from "@/pages/workspace/mock-data";
+
+interface EditorPanelProps {
+  file?: MockFileNode;
+}
+
+export function EditorPanel({ file }: EditorPanelProps) {
+  const [, setMarkers] = useState<Parameters<OnValidate>[0]>([]);
+
+  if (!file || file.kind !== "file") {
+    return (
+      <section className="flex h-full w-full items-center justify-center bg-background text-sm text-muted-foreground">
+        <div className="text-center">
+          <p>No file selected</p>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="h-full w-full overflow-hidden bg-background">
+      <Editor
+        key={file.path}
+        theme="vs-dark"
+        language={file.language ?? "typescript"}
+        value={file.content ?? ""}
+        onValidate={setMarkers}
+        options={{
+          automaticLayout: true,
+          minimap: { enabled: false },
+          readOnly: false,
+        }}
+      />
+    </section>
+  );
+}