feat: add internationalization support

src/pages/tools/xml/i18n/en.json

@@ -0,0 +1,36 @@
+{
+  "xmlBeautifier": {
+    "title": "XML Beautifier",
+    "description": "Format XML with proper indentation and spacing.",
+    "inputTitle": "Input XML",
+    "resultTitle": "Beautified XML",
+    "indentation": "Indentation",
+    "useSpaces": "Use Spaces",
+    "useSpacesDescription": "Indent output with spaces",
+    "useTabs": "Use Tabs",
+    "useTabsDescription": "Indent output with tabs.",
+    "toolInfo": {
+      "title": "XML Beautifier",
+      "description": "This tool allows you to format XML data with proper indentation and spacing, making it more readable and easier to work with."
+    }
+  },
+  "xmlValidator": {
+    "title": "XML Validator",
+    "description": "Validate XML syntax and structure.",
+    "placeholder": "Paste or import XML here...",
+    "toolInfo": {
+      "title": "XML Validator",
+      "description": "This tool allows you to validate XML syntax and structure. It checks if the XML is well-formed and provides detailed error messages for any issues found."
+    }
+  },
+  "xmlViewer": {
+    "title": "XML Viewer",
+    "description": "View and explore XML structure in a tree format.",
+    "inputTitle": "Input XML",
+    "resultTitle": "XML Tree View",
+    "toolInfo": {
+      "title": "XML Viewer",
+      "description": "This tool allows you to view XML data in a hierarchical tree format, making it easier to explore and understand the structure of XML documents."
+    }
+  }
+}

src/pages/tools/xml/xml-beautifier/index.tsx

@@ -7,6 +7,7 @@ import ToolTextResult from '@components/result/ToolTextResult';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { beautifyXml } from './service';
 import { InitialValuesType } from './types';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {};
 
@@ -24,6 +25,7 @@ export default function XmlBeautifier({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -37,18 +39,28 @@ export default function XmlBeautifier({
       input={input}
       inputComponent={
         <ToolTextInput
+          title={t('xml.beautifier.inputTitle')}
           value={input}
           onChange={setInput}
-          placeholder="Paste or import XML here..."
+          placeholder={t('xml.beautifier.placeholder')}
+        />
+      }
+      resultComponent={
+        <ToolTextResult
+          title={t('xml.beautifier.resultTitle')}
+          value={result}
+          extension="xml"
         />
       }
-      resultComponent={<ToolTextResult value={result} extension="xml" />}
       initialValues={initialValues}
       exampleCards={exampleCards}
       getGroups={null}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('xml.beautifier.toolInfo.title', { title }),
+        description: longDescription
+      }}
     />
   );
 }

src/pages/tools/xml/xml-beautifier/meta.ts

@@ -4,10 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('xml', {
   name: 'XML Beautifier',
   path: 'xml-beautifier',
-  icon: 'mdi:format-align-left',
+  icon: 'material-symbols:code',
   description:
-    'Beautify and reformat XML for improved readability and structure.',
-  shortDescription: 'Beautify XML for readability.',
-  keywords: ['xml', 'beautify', 'format', 'pretty', 'indent'],
-  component: lazy(() => import('./index'))
+    'Format and beautify XML code with proper indentation and spacing. Make XML files more readable and organized.',
+  shortDescription: 'Format and beautify XML code',
+  keywords: ['xml', 'beautify', 'format', 'code', 'indent'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'xml.xmlBeautifier.name',
+    description: 'xml.xmlBeautifier.description',
+    shortDescription: 'xml.xmlBeautifier.shortDescription'
+  }
 });

src/pages/tools/xml/xml-validator/index.tsx

@@ -7,6 +7,7 @@ import ToolTextResult from '@components/result/ToolTextResult';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { validateXml } from './service';
 import { InitialValuesType } from './types';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {};
 
@@ -31,6 +32,7 @@ export default function XmlValidator({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -46,7 +48,7 @@ export default function XmlValidator({
         <ToolTextInput
           value={input}
           onChange={setInput}
-          placeholder="Paste or import XML here..."
+          placeholder={t('xml.xmlValidator.placeholder')}
         />
       }
       resultComponent={<ToolTextResult value={result} extension="txt" />}
@@ -55,7 +57,10 @@ export default function XmlValidator({
       getGroups={null}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('xml.xmlValidator.toolInfo.title'),
+        description: t('xml.xmlValidator.toolInfo.description')
+      }}
     />
   );
 }

src/pages/tools/xml/xml-validator/meta.ts

@@ -4,10 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('xml', {
   name: 'XML Validator',
   path: 'xml-validator',
-  icon: 'mdi:check-decagram',
+  icon: 'material-symbols:check-circle',
   description:
-    'Validate XML files or strings to ensure they are well-formed and error-free.',
-  shortDescription: 'Validate XML for errors.',
-  keywords: ['xml', 'validate', 'check', 'syntax', 'error'],
-  component: lazy(() => import('./index'))
+    'Validate XML code for syntax errors and well-formed structure. Check if XML documents follow proper formatting rules.',
+  shortDescription: 'Validate XML code for errors',
+  keywords: ['xml', 'validate', 'check', 'syntax', 'errors'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'xml.xmlValidator.name',
+    description: 'xml.xmlValidator.description',
+    shortDescription: 'xml.xmlValidator.shortDescription'
+  }
 });