35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import MonacoEditor from '@/app/public/MonacoEditor';
|
|
import { Button, useDisclosure } from '@nextui-org/react';
|
|
import ExportModal from '@/app/jsonparser/ExportModal';
|
|
import { HiOutlineExternalLink } from 'react-icons/hi';
|
|
|
|
const DEFAULT_EDITOR_VALUE = '{}';
|
|
|
|
const JsonEditor = () => {
|
|
const [ editorValue, setEditorValue ] = useState<string>(DEFAULT_EDITOR_VALUE);
|
|
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
|
|
|
return (
|
|
<>
|
|
<div className={ 'rounded-2xl shadow-2xl overflow-hidden relative' }>
|
|
<MonacoEditor language={ 'json' } defaultValue={ DEFAULT_EDITOR_VALUE } setValue={ setEditorValue } />
|
|
|
|
<div className={ 'absolute top-4 right-4 z-10' }>
|
|
<Button
|
|
aria-label={ 'export' }
|
|
variant={ 'light' }
|
|
isIconOnly
|
|
onPress={ onOpen }
|
|
startContent={ <HiOutlineExternalLink size={ 20 } /> } />
|
|
<ExportModal isOpen={ isOpen } onOpenChange={ onOpenChange } value={ editorValue } />
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default JsonEditor;
|