settings.tsx

import React from "react";
import { EditorSettings } from "../editor";

interface SettingsProps {
    settings: EditorSettings;
    onSettingsChange: (settings: EditorSettings) => void;
}

function Settings({ settings, onSettingsChange }: SettingsProps) {
    return (
        <div className={"SettingsMenu"}>
            <h3>Settings</h3>
            <input
                id="node-label-visibility"
                type={"checkbox"}
                checked={settings.visibleLabels}
                onChange={(event) => {
                    onSettingsChange({
                        ...settings,
                        visibleLabels: event.target.checked,
                    });
                }}
            />
            <label htmlFor="node-label-visibility">Node labels</label>
            <br />
            <input
                id="connect-on-drag"
                type={"checkbox"}
                checked={settings.connectOnDrag}
                onChange={(event) => {
                    onSettingsChange({
                        ...settings,
                        connectOnDrag: event.target.checked,
                    });
                }}
            />
            <label htmlFor="connect-on-drag">Connect nodes when dragged</label>
        </div>
    );
}

export default Settings;