1
 2import Editor from '@monaco-editor/react';
 3import { useTheme } from "@marzneshin/features/theme-switch";
 4import { useNodesSettings } from "./use-nodes-settings";
 5import { Button } from '@marzneshin/components';
 6import { useTranslation } from 'react-i18next';
 7import { NodeType } from '../..';
 8
 9export const NodeConfigEditor = ({ entity }: { entity: NodeType }) => {
10    const { t } = useTranslation()
11    const { theme } = useTheme()
12    const {
13        payloadValidity,
14        data,
15        handleConfigSave,
16        handleConfigChange,
17        handleEditorValidation
18    } = useNodesSettings(entity)
19
20    return (<>
21        <Editor
22            height="50vh"
23            className="rounded-sm border"
24            defaultLanguage="json"
25            theme={theme === "dark" ? "vs-dark" : "github"}
26            defaultValue={JSON.stringify(data, null, '\t')}
27            onChange={handleConfigChange}
28            onValidate={handleEditorValidation}
29
30        />
31        <Button
32            className="w-full"
33            variant={!payloadValidity ? "destructive" : "default"}
34            onClick={handleConfigSave}
35            disabled={!payloadValidity}
36        >
37            {t('save')}
38        </Button>
39    </>
40    )
41}