marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-22 15:39:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: use monaco editor

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-07-18 03:26:42 +01:00
parent 64d6628270
commit db87355274
6 changed files with 163 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/pages/tools/json/json-comparison/index.tsx
View File

@@ -1,42 +1,10 @@
import { useState, useEffect } from 'react';
import { useEffect, useState } from 'react';
import ToolContent from '@components/ToolContent';
import LineNumberInput from '@components/input/LineNumberInput';
import ToolCodeInput from '@components/input/ToolCodeInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { compareJson } from './service';
import { ToolComponentProps } from '@tools/defineTool';
import { Box, Grid, styled } from '@mui/material';
const StyledContainer = styled(Box)({
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
minHeight: '500px',
marginBottom: '20px'
});
const StyledGrid = styled(Grid)({
flex: 1,
'& .MuiGrid-item': {
height: '100%'
}
});
const StyledInputWrapper = styled(Box)({
height: '100%',
'& > div': {
height: '100%',
'& textarea': {
height: '100% !important',
minHeight: '450px',
resize: 'none',
fontSize: '14px',
lineHeight: '1.5',
padding: '12px'
}
}
});
import { Grid } from '@mui/material';
type InitialValuesType = {};
@@ -73,8 +41,8 @@ export default function JsonComparison({ title }: ToolComponentProps) {
compareInputs();
}, [input1, input2]);
const handleInput1Change = (value: string) => {
setInput1(value);
const handleInput1Change = (value: string | undefined) => {
setInput1(value ?? '');
};
const handleInput2Change = (value: string) => {
@@ -90,39 +58,31 @@ export default function JsonComparison({ title }: ToolComponentProps) {
getGroups={null}
compute={() => {}}
inputComponent={
<StyledContainer>
<StyledGrid container spacing={2}>
<Grid item xs={4}>
<StyledInputWrapper>
<LineNumberInput
title="First JSON"
value={input1}
onChange={handleInput1Change}
placeholder="Paste your first JSON here..."
/>
</StyledInputWrapper>
</Grid>
<Grid item xs={4}>
<StyledInputWrapper>
<LineNumberInput
title="Second JSON"
value={input2}
onChange={handleInput2Change}
placeholder="Paste your second JSON here..."
/>
</StyledInputWrapper>
</Grid>
<Grid item xs={4}>
<StyledInputWrapper>
<ToolTextResult
title="Differences"
value={result}
extension={'txt'}
/>
</StyledInputWrapper>
</Grid>
</StyledGrid>
</StyledContainer>
<Grid container spacing={2}>
<Grid item xs={12} md={6} lg={4}>
<ToolCodeInput
title="First JSON"
value={input1}
onChange={handleInput1Change}
language={'json'}
/>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<ToolCodeInput
title="Second JSON"
language={'json'}
value={input2}
onChange={handleInput2Change}
/>
</Grid>
<Grid item xs={12} md={12} lg={4}>
<ToolTextResult
title="Differences"
value={result}
extension={'txt'}
/>
</Grid>
</Grid>
}
/>
);