UI Base

client/homebrew/editor/settingsEditor/settingsEditor.jsx

@@ -0,0 +1,55 @@
+import "./metadataEditor.less";
+import React, { useState } from "react";
+
+const SettingsEditor = () => {
+	const [settings, setSettings] = useState({
+		blockShading: false,
+		activeLineShading: true,
+		showLineNumbers: true,
+	});
+
+	const handleFieldChange = (setting, e) => {
+		setSettings((prevSettings) => ({
+			...prevSettings,
+			[setting]: e.target.checked,
+		}));
+	};
+
+	return (
+		<div className="settingsEditor">
+			<h1>Editor Settings</h1>
+
+			<label>
+				Background Shading of blocks in editor
+				<input
+					type="checkbox"
+					name="blockShading"
+					checked={settings.blockShading}
+					onChange={(e) => handleFieldChange("blockShading", e)}
+				/>
+			</label>
+
+			<label>
+				Shading of active line
+				<input
+					type="checkbox"
+					name="activeLineShading"
+					checked={settings.activeLineShading}
+					onChange={(e) => handleFieldChange("activeLineShading", e)}
+				/>
+			</label>
+
+			<label>
+				Show Line Numbers
+				<input
+					type="checkbox"
+					name="showLineNumbers"
+					checked={settings.showLineNumbers}
+					onChange={(e) => handleFieldChange("showLineNumbers", e)}
+				/>
+			</label>
+		</div>
+	);
+};
+
+export default SettingsEditor;