feat: add internationalization support

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'
+  }
 });