nikita
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
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>
|
|
);
|
|
};
|