code editor page

2025-04-17 10:10:04 -07:00 · 2025-04-17 10:10:04 -07:00 · 29694fd201
commit 29694fd201
parent ef85ff6d24
7 changed files with 565 additions and 0 deletions
--- a/src/pages/CodeEditor.jsx
+++ b/src/pages/CodeEditor.jsx
@ -0,0 +1,122 @@
+// 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";
+
+const PageCodeEditor = () => {
+  // State for storing code in different tabs
+  const [htmlCode, setHtmlCode] = useState(
+    "<div>\n  <h1>Hello World</h1>\n  <p>Start editing to see some magic happen!</p>\n</div>"
+  );
+  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 = `
+        <html>
+            <head>
+                <style>${cssCode}</style>
+            </head>
+            <body>
+                ${htmlCode}
+                <script>${jsCode}</script>
+            </body>
+        </html>
+    `;
+
+  useEffect(() => {
+    document.title = "Code Editor";
+  }, []);
+
+  // Function to handle which editor to show based on active tab
+  const renderEditor = () => {
+    switch (activeTab) {
+      case "html":
+        return (
+          <CodeMirror
+            value={htmlCode}
+            height="100%"
+            theme={vscodeDark}
+            extensions={[html()]}
+            onChange={(value) => setHtmlCode(value)}
+          />
+        );
+      case "css":
+        return (
+          <CodeMirror
+            value={cssCode}
+            height="100%"
+            theme={vscodeDark}
+            extensions={[css()]}
+            onChange={(value) => setCssCode(value)}
+          />
+        );
+      case "js":
+        return (
+          <CodeMirror
+            value={jsCode}
+            height="100%"
+            theme={vscodeDark}
+            extensions={[javascript()]}
+            onChange={(value) => setJsCode(value)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <main className="code-editor-page">
+      <div className="editor-container">
+        <div className="editor-tabs">
+          <button
+            className={`tab ${activeTab === "html" ? "active" : ""}`}
+            onClick={() => setActiveTab("html")}
+          >
+            HTML
+          </button>
+          <button
+            className={`tab ${activeTab === "css" ? "active" : ""}`}
+            onClick={() => setActiveTab("css")}
+          >
+            CSS
+          </button>
+          <button
+            className={`tab ${activeTab === "js" ? "active" : ""}`}
+            onClick={() => setActiveTab("js")}
+          >
+            JavaScript
+          </button>
+        </div>
+        <div className="editor-content">{renderEditor()}</div>
+      </div>
+      <div className="preview-container">
+        <div className="preview-header">
+          <h3>Preview</h3>
+        </div>
+        <div className="preview-content">
+          <iframe
+            title="code-preview"
+            srcDoc={combinedCode}
+            sandbox="allow-scripts"
+            width="100%"
+            height="100%"
+          />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default PageCodeEditor;