feat: IDE

2026-04-04 04:59:42 +03:00
parent 9d1096a9b4
commit f537f1eab9
20 changed files with 2884 additions and 15 deletions
@@ -0,0 +1,89 @@
+import React from "react";
+import Editor from "@monaco-editor/react";
+import { FiFolder } from "react-icons/fi";
+import { getLanguage } from "../helpers/fileTree";
+
+interface CodeEditorProps {
+  filePath: string;
+  content: string;
+  onChange: (content: string) => void;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({
+  filePath,
+  content,
+  onChange,
+}) => {
+  return (
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "#1e1e1e",
+      }}
+    >
+      <div style={{ flex: 1 }}>
+        {filePath ? (
+          <Editor
+            height="100%"
+            language={getLanguage(filePath)}
+            value={content}
+            onChange={(value) => onChange(value || "")}
+            theme="vs-dark"
+            options={{
+              minimap: { enabled: false },
+              fontSize: 14,
+              fontFamily: "'Cascadia Code', 'Fira Code', monospace",
+              tabSize: 4,
+              wordWrap: "on",
+              lineNumbers: "on",
+              automaticLayout: true,
+              renderWhitespace: "selection",
+              smoothScrolling: true,
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              color: "#858585",
+              textAlign: "center",
+            }}
+          >
+            <div>
+              <div
+                style={{
+                  marginBottom: "24px",
+                  display: "flex",
+                  justifyContent: "center",
+                  opacity: 0.5,
+                }}
+              >
+                <FiFolder size={64} />
+              </div>
+              <div
+                style={{
+                  fontSize: "18px",
+                  marginBottom: "12px",
+                  color: "#cccccc",
+                }}
+              >
+                Welcome to Web VS Code
+              </div>
+              <div style={{ fontSize: "13px", marginBottom: "8px" }}>
+                Right-click on a folder to create files
+              </div>
+              <div style={{ fontSize: "12px", color: "#0e639c" }}>
+                Or right-click anywhere in the explorer
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};