marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-21 23:19:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: prettify json

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-09 18:08:37 +00:00
parent 37154c6461
commit 27f7b5460b
1 changed files with 42 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/pages/tools/json/prettify/index.tsx
View File

@@ -124,56 +124,48 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
};
return (
<Box>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolTextInput
title={'Input JSON'}
value={input}
onChange={setInput}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolTextInput title={'Input JSON'} value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title={'Pretty JSON'} value={result} />}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Indentation',
component: (
<Box>
<RadioWithTextField
checked={values.indentationType === 'space'}
title={'Use Spaces'}
fieldName={'indentationType'}
description={'Indent output with spaces'}
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
updateNumberField(val, 'spacesCount', updateField)
}
/>
<SimpleRadio
onClick={() => updateField('indentationType', 'tab')}
checked={values.indentationType === 'tab'}
description={'Indent output with tabs.'}
title={'Use Tabs'}
/>
</Box>
)
}
resultComponent={
<ToolTextResult title={'Pretty JSON'} value={result} />
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Indentation',
component: (
<Box>
<RadioWithTextField
checked={values.indentationType === 'space'}
title={'Use Spaces'}
fieldName={'indentationType'}
description={'Indent output with spaces'}
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
updateNumberField(val, 'spacesCount', updateField)
}
/>
<SimpleRadio
onClick={() => updateField('indentationType', 'tab')}
checked={values.indentationType === 'tab'}
description={'Indent output with tabs.'}
title={'Use Tabs'}
/>
</Box>
)
}
]}
compute={compute}
setInput={setInput}
exampleCards={exampleCards}
/>
<ToolInfo
title="What Is a JSON Prettifier?"
description="This tool adds consistent formatting to the data in JavaScript Object Notation (JSON) format. This transformation makes the JSON code more readable, making it easier to understand and edit. The program parses the JSON data structure into tokens and then reformats them by adding indentation and line breaks. If the data is hierarchial, then it adds indentation at the beginning of lines to visually show the depth of the JSON and adds newlines to break long single-line JSON arrays into multiple shorter, more readable ones. Additionally, this utility can remove unnecessary spaces and tabs from your JSON code (especially leading and trailing whitespaces), making it more compact. You can choose the line indentation method in the options: indent with spaces or indent with tabs. When using spaces, you can also specify how many spaces to use for each indentation level (usually 2 or 4 spaces). "
/>
<Separator backgroundColor="#5581b5" margin="50px" />
</Box>
]}
compute={compute}
setInput={setInput}
exampleCards={exampleCards}
toolInfo={{
title: 'What Is a JSON Prettifier?',
description:
'This tool adds consistent formatting to the data in JavaScript Object Notation (JSON) format. This transformation makes the JSON code more readable, making it easier to understand and edit. The program parses the JSON data structure into tokens and then reformats them by adding indentation and line breaks. If the data is hierarchial, then it adds indentation at the beginning of lines to visually show the depth of the JSON and adds newlines to break long single-line JSON arrays into multiple shorter, more readable ones. Additionally, this utility can remove unnecessary spaces and tabs from your JSON code (especially leading and trailing whitespaces), making it more compact. You can choose the line indentation method in the options: indent with spaces or indent with tabs. When using spaces, you can also specify how many spaces to use for each indentation level (usually 2 or 4 spaces). '
}}
/>
);
}