diff --git a/src/components/EditorPanel.jsx b/src/components/EditorPanel.jsx index fc7c247..fadcc5d 100644 --- a/src/components/EditorPanel.jsx +++ b/src/components/EditorPanel.jsx @@ -3,14 +3,32 @@ import Editor from '@monaco-editor/react'; export default function EditorPanel({ code, onChange }) { return ( -
+
onChange(v || '')} theme="vs-dark" + options={{ + fontSize: 16, + padding: { top: 10, bottom: 10 }, + minimap: { enabled: false }, + scrollbar: { + verticalScrollbarSize: 8, + horizontalScrollbarSize: 8, + }, + lineNumbers: 'on', + scrollBeyondLastLine: false, + }} />
); -} \ No newline at end of file +} diff --git a/src/pages/CodeEditor.jsx b/src/pages/CodeEditor.jsx index 43a9b5d..7c0ea3c 100644 --- a/src/pages/CodeEditor.jsx +++ b/src/pages/CodeEditor.jsx @@ -1,131 +1,203 @@ -// Page - Code Editor import { useEffect, useState } from "react"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; -import { html } from "@codemirror/lang-html"; -import { css } from "@codemirror/lang-css"; -import { vscodeDark } from "@uiw/codemirror-theme-vscode"; import EditorPanel from "../components/EditorPanel"; -import PreviewPanel from "../components/PreviewPanel"; const PageCodeEditor = () => { - const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n return { 'move': 'up' }`); - // State for storing code in different tabs - const [htmlCode, setHtmlCode] = useState( - "
\n

Hello World

\n

Start editing to see some magic happen!

\n
" - ); - const [cssCode, setCssCode] = useState( - "h1 {\n color: #0070f3;\n}\n\np {\n color: #444;\n}" - ); - const [jsCode, setJsCode] = useState( - '// JavaScript goes here\nconsole.log("Hello from the editor!");' - ); - - // State for active tab - const [activeTab, setActiveTab] = useState("html"); - - // Combined code for preview - const combinedCode = ` - - - - - - ${htmlCode} - - - - `; - useEffect(() => { - document.title = "Code Editor"; + document.title = "Snake Brain Editor"; }, []); - // Function to handle which editor to show based on active tab - const renderEditor = () => { - switch (activeTab) { - case "html": - return ( - setHtmlCode(value)} - /> - ); - case "css": - return ( - setCssCode(value)} - /> - ); - case "js": - return ( - setJsCode(value)} - /> - ); - default: - return null; - } - }; - return ( -
- -
- -
-
- -
- -
-
- - - -
-
{renderEditor()}
-
-
-
-

Preview

-
-
-