Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

code editor page

Browse source
This commit is contained in:
Anton Kupriianov 2025-04-17 10:10:04 -07:00
parent ef85ff6d24
commit 29694fd201
7 changed files with 565 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/Header.jsx
View file

@ -11,6 +11,9 @@ const Header = () => {
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/editor">CodeEditor</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>

122
src/pages/CodeEditor.jsx Normal file
View file

@ -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;

9
src/routers/AppRouter.jsx
View file

@ -9,6 +9,7 @@ import ProtectedRoute from "../components/ProtectedRoute";
// Pages
import HomePage from "../pages/HomePage";
import LoginPage from "../pages/LoginPage";
import PageCodeEditor from "../pages/CodeEditor";
import PageNotFound from "../pages/PageNotFound";
const AppRouter = () => {
@ -26,6 +27,14 @@ const AppRouter = () => {
</ProtectedRoute>
}
/>
<Route
path="/editor"
element={
<ProtectedRoute>
<PageCodeEditor />
</ProtectedRoute>
}
/>
<Route path="*" element={<PageNotFound />} />
</Routes>
<Footer />

97
src/scss/page/_code_editor.scss Normal file
View file

@ -0,0 +1,97 @@
// Code Editor Page Styling
@use "../base/settings" as *;
.code-editor-page {
display: flex;
height: calc(100vh - 120px); // Adjust based on your header/footer heights
padding: 0;
margin: 0;
overflow: hidden;
.editor-container,
.preview-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.editor-container {
border-right: 1px solid $grey;
}
.editor-tabs {
display: flex;
background-color: #1e1e1e;
border-bottom: 1px solid #333;
.tab {
padding: 8px 16px;
background: none;
border: none;
color: #ddd;
cursor: pointer;
font-size: 14px;
&:hover {
background-color: #2a2a2a;
}
&.active {
color: $yellow;
border-bottom: 2px solid $yellow;
}
}
}
.editor-content {
flex: 1;
overflow: hidden;
// Ensure CodeMirror fills the container
& > div {
height: 100%;
}
}
.preview-header {
background-color: #f5f5f5;
padding: 8px 16px;
border-bottom: 1px solid $grey;
h3 {
margin: 0;
font-size: 16px;
color: $dark;
}
}
.preview-content {
flex: 1;
background-color: white;
overflow: auto;
iframe {
border: none;
display: block;
}
}
// Responsive layout for smaller screens
@media (max-width: 768px) {
flex-direction: column;
.editor-container,
.preview-container {
height: 50%;
width: 100%;
}
.editor-container {
border-right: none;
border-bottom: 1px solid $grey;
}
}
}

1
src/scss/styles.scss
View file

@ -12,6 +12,7 @@
//page specific styling
@use "./page//home";
@use "./page//login";
@use "./page/code_editor";
// Utilities
@use "./utilities/utility-classes";