Added tool options

src/pages/tools/json/json-to-xml/index.tsx

@@ -5,46 +5,55 @@ import ToolTextResult from '@components/result/ToolTextResult';
 // import { convertJsonToXml } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
-import { Box } from '@mui/material';
+import { Box, Radio } from '@mui/material';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import RadioWithTextField from '@components/options/RadioWithTextField';
+import SimpleRadio from '@components/options/SimpleRadio';
 
 type InitialValuesType = {
-  delimiter: string;
+  indentationType: 'space' | 'tab' | 'none';
-  quote: string;
+  addMetaTag: boolean;
-  comment: string;
-  useHeaders: boolean;
-  skipEmptyLines: boolean;
 };
 
 const initialValues: InitialValuesType = {
-  delimiter: ',',
+  indentationType: 'space',
-  quote: '"',
+  addMetaTag: false
-  comment: '#',
-  useHeaders: true,
-  skipEmptyLines: true
 };
 
 const exampleCards: CardExampleType<InitialValuesType>[] = [
   {
-    title: 'Basic CSV to XML',
+    title: 'Basic JSON to XML',
-    description: 'Convert a simple CSV file into an XML format.',
+    description: 'Convert a simple JSON object into an XML format.',
-    sampleText: 'name,age,city\nJohn,30,New York\nAlice,25,London',
+    sampleText: `
+{
+  "users": [
+    {
+      "name": "John",
+      "age": 30,
+      "city": "New York"
+    },
+    {
+      "name": "Alice",
+      "age": 25,
+      "city": "London"
+    }
+  ]
+}`,
     sampleResult: `<root>
-  <row>
+\t<users>
-    <name>John</name>
+\t\t<name>John</name>
-    <age>30</age>
+\t\t<age>30</age>
-    <city>New York</city>
+\t\t<city>New York</city>
-  </row>
+\t</users>
-  <row>
+\t<users>
-    <name>Alice</name>
+\t\t<name>Alice</name>
-    <age>25</age>
+\t\t<age>25</age>
-    <city>London</city>
+\t\t<city>London</city>
-  </row>
+\t</users>
 </root>`,
     sampleOptions: {
-      ...initialValues,
+      ...initialValues
-      useHeaders: true
     }
   }
 ];
@@ -82,42 +91,43 @@ export default function JsonToXml({ title }: ToolComponentProps) {
       resultComponent={<ToolTextResult title="Output XML" value={result} />}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Input Json Format',
+          title: 'Output XML Indentation',
           component: (
             <Box>
-              <TextFieldWithDesc
+              <SimpleRadio
-                description="Column Separator"
+                checked={values.indentationType === 'space'}
-                value={values.delimiter}
+                title={'Use Spaces for indentation'}
-                onOwnChange={(val) => updateField('delimiter', val)}
+                description={
+                  'Use spaces to visualize the hierarchical structure of XML.'
+                }
+                onClick={() => updateField('indentationType', 'space')}
               />
-              <TextFieldWithDesc
+              <SimpleRadio
-                description="Field Quote"
+                checked={values.indentationType === 'tab'}
-                onOwnChange={(val) => updateField('quote', val)}
+                title={'Use Tabs for indentation'}
-                value={values.quote}
+                description={
+                  'Use tabs to visualize the hierarchical structure of XML.'
+                }
+                onClick={() => updateField('indentationType', 'tab')}
               />
-              <TextFieldWithDesc
+              <SimpleRadio
-                description="Comment Symbol"
+                checked={values.indentationType === 'none'}
-                value={values.comment}
+                title={'No indentation'}
-                onOwnChange={(val) => updateField('comment', val)}
+                description={'Output XML without any indentation.'}
+                onClick={() => updateField('indentationType', 'none')}
               />
             </Box>
           )
         },
         {
-          title: 'Conversion Options',
+          title: 'XML Meta Information',
           component: (
             <Box>
               <CheckboxWithDesc
-                checked={values.useHeaders}
+                checked={values.addMetaTag}
-                onChange={(value) => updateField('useHeaders', value)}
+                onChange={(value) => updateField('addMetaTag', value)}
-                title="Use Headers"
+                title="Add an XML Meta Tag"
-                description="First row is treated as column headers"
+                description="Add a meta tag at the beginning of the XML output."
-              />
-              <CheckboxWithDesc
-                checked={values.skipEmptyLines}
-                onChange={(value) => updateField('skipEmptyLines', value)}
-                title="Skip Empty Lines"
-                description="Don't process empty lines in the CSV"
               />
             </Box>
           )