// 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( "

Hello World

Start editing to see some magic happen!

" ); 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"; }, []); // 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()}