feat: add internationalization support

src/pages/tools/number/arithmetic-sequence/index.tsx

@@ -7,6 +7,7 @@ import { generateArithmeticSequence } from './service';
 import * as Yup from 'yup';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 type InitialValuesType = {
   firstTerm: string;
@@ -70,6 +71,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function ArithmeticSequence({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [result, setResult] = useState<string>('');
 
   return (
@@ -77,35 +79,43 @@ export default function ArithmeticSequence({ title }: ToolComponentProps) {
       title={title}
       inputComponent={null}
       resultComponent={
-        <ToolTextResult title="Generated Sequence" value={result} />
+        <ToolTextResult
+          title={t('number.arithmeticSequence.resultTitle')}
+          value={result}
+        />
       }
       initialValues={initialValues}
       validationSchema={validationSchema}
       exampleCards={exampleCards}
       toolInfo={{
-        title: 'What is an Arithmetic Sequence?',
-        description:
-          'An arithmetic sequence is a sequence of numbers where the difference between each consecutive term is constant. This constant difference is called the common difference. Given the first term (a₁) and the common difference (d), each term can be found by adding the common difference to the previous term.'
+        title: t('number.arithmeticSequence.toolInfo.title'),
+        description: t('number.arithmeticSequence.toolInfo.description')
       }}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Sequence Parameters',
+          title: t('number.arithmeticSequence.sequenceParameters'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description="First term of the sequence (a₁)"
+                description={t(
+                  'number.arithmeticSequence.firstTermDescription'
+                )}
                 value={values.firstTerm}
                 onOwnChange={(val) => updateField('firstTerm', val)}
                 type="number"
               />
               <TextFieldWithDesc
-                description="Common difference between terms (d)"
+                description={t(
+                  'number.arithmeticSequence.commonDifferenceDescription'
+                )}
                 value={values.commonDifference}
                 onOwnChange={(val) => updateField('commonDifference', val)}
                 type="number"
               />
               <TextFieldWithDesc
-                description="Number of terms to generate (n)"
+                description={t(
+                  'number.arithmeticSequence.numberOfTermsDescription'
+                )}
                 value={values.numberOfTerms}
                 onOwnChange={(val) => updateField('numberOfTerms', val)}
                 type="number"
@@ -114,10 +124,10 @@ export default function ArithmeticSequence({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Output Format',
+          title: t('number.arithmeticSequence.outputFormat'),
           component: (
             <TextFieldWithDesc
-              description="Separator between terms"
+              description={t('number.arithmeticSequence.separatorDescription')}
               value={values.separator}
               onOwnChange={(val) => updateField('separator', val)}
             />

src/pages/tools/number/arithmetic-sequence/meta.ts

@@ -2,20 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('number', {
-  name: 'Generate Arithmetic Sequence',
+  name: 'Arithmetic Sequence',
   path: 'arithmetic-sequence',
-  icon: 'ic:sharp-plus',
+  icon: 'material-symbols:functions',
   description:
-    'Generate an arithmetic sequence by specifying the first term (a₁), common difference (d), and number of terms (n). The tool creates a sequence where each number differs from the previous by a constant difference.',
-  shortDescription:
-    'Generate a sequence where each term differs by a constant value.',
-  keywords: [
-    'arithmetic',
-    'sequence',
-    'progression',
-    'numbers',
-    'series',
-    'generate'
-  ],
-  component: lazy(() => import('./index'))
+    'Generate arithmetic sequences with specified start value, common difference, and number of terms. Create mathematical progressions for calculations or analysis.',
+  shortDescription: 'Generate arithmetic sequences',
+  keywords: ['arithmetic', 'sequence', 'math', 'progression'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'number.arithmeticSequence.name',
+    description: 'number.arithmeticSequence.description',
+    shortDescription: 'number.arithmeticSequence.shortDescription'
+  }
 });

src/pages/tools/number/generate/index.tsx

@@ -5,6 +5,7 @@ import { listOfIntegers } from './service';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   firstValue: '1',
@@ -14,6 +15,7 @@ const initialValues = {
 };
 
 export default function GenerateNumbers({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [result, setResult] = useState<string>('');
 
   const compute = (optionsValues: typeof initialValues) => {
@@ -34,23 +36,23 @@ export default function GenerateNumbers({ title }: ToolComponentProps) {
       initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Arithmetic sequence option',
+          title: t('number.generate.arithmeticSequenceOption'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description={'Start sequence from this number.'}
+                description={t('number.generate.startSequenceDescription')}
                 value={values.firstValue}
                 onOwnChange={(val) => updateField('firstValue', val)}
                 type={'number'}
               />
               <TextFieldWithDesc
-                description={'Increase each element by this amount'}
+                description={t('number.generate.stepDescription')}
                 value={values.step}
                 onOwnChange={(val) => updateField('step', val)}
                 type={'number'}
               />
               <TextFieldWithDesc
-                description={'Number of elements in sequence.'}
+                description={t('number.generate.numberOfElementsDescription')}
                 value={values.numberOfNumbers}
                 onOwnChange={(val) => updateField('numberOfNumbers', val)}
                 type={'number'}
@@ -59,12 +61,10 @@ export default function GenerateNumbers({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Separator',
+          title: t('number.generate.separator'),
           component: (
             <TextFieldWithDesc
-              description={
-                'Separate elements in the arithmetic sequence by this character.'
-              }
+              description={t('number.generate.separatorDescription')}
               value={values.separator}
               onOwnChange={(val) => updateField('separator', val)}
             />
@@ -73,7 +73,10 @@ export default function GenerateNumbers({ title }: ToolComponentProps) {
       ]}
       compute={compute}
       resultComponent={
-        <ToolTextResult title={'Generated numbers'} value={result} />
+        <ToolTextResult
+          title={t('number.generate.resultTitle')}
+          value={result}
+        />
       }
     />
   );

src/pages/tools/number/generate/meta.ts

@@ -3,12 +3,17 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('number', {
-  name: 'Generate numbers',
+  name: 'Generate',
   path: 'generate',
-  shortDescription: 'Quickly calculate a list of integers in your browser',
-  icon: 'lsicon:number-filled',
+  icon: 'material-symbols:add-circle',
   description:
-    'Quickly calculate a list of integers in your browser. To get your list, just specify the first integer, change value and total count in the options below, and this utility will generate that many integers',
-  keywords: ['generate'],
-  component: lazy(() => import('./index'))
+    'Generate random numbers within specified ranges. Create sequences of numbers for testing, simulations, or random data generation.',
+  shortDescription: 'Generate random numbers in specified ranges',
+  keywords: ['generate', 'random', 'numbers'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'number.generate.name',
+    description: 'number.generate.description',
+    shortDescription: 'number.generate.shortDescription'
+  }
 });

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

@@ -0,0 +1,45 @@
+{
+  "sum": {
+    "title": "Sum Numbers",
+    "description": "Calculate the sum of a list of numbers.",
+    "inputTitle": "Input numbers",
+    "resultTitle": "Sum",
+    "sumOptions": "Sum Options",
+    "ignoreNonNumeric": "Ignore non-numeric values",
+    "ignoreNonNumericDescription": "Skip values that are not numbers",
+    "toolInfo": {
+      "title": "Sum numbers",
+      "description": "This tool allows you to calculate the sum of a list of numbers. You can input numbers separated by various delimiters and get their total sum."
+    }
+  },
+  "generate": {
+    "title": "Generate Numbers",
+    "description": "Generate a sequence of numbers with customizable parameters.",
+    "resultTitle": "Generated numbers",
+    "arithmeticSequenceOption": "Arithmetic sequence option",
+    "startSequenceDescription": "Start sequence from this number.",
+    "stepDescription": "Increase each element by this amount",
+    "numberOfElementsDescription": "Number of elements in sequence.",
+    "separator": "Separator",
+    "separatorDescription": "Separate elements in the arithmetic sequence by this character.",
+    "toolInfo": {
+      "title": "Generate numbers",
+      "description": "This tool allows you to generate a sequence of numbers with customizable parameters. You can specify the starting value, step size, and number of elements."
+    }
+  },
+  "arithmeticSequence": {
+    "title": "Arithmetic Sequence",
+    "description": "Generate arithmetic sequences with customizable parameters.",
+    "resultTitle": "Generated Sequence",
+    "sequenceParameters": "Sequence Parameters",
+    "firstTermDescription": "First term of the sequence (a₁)",
+    "commonDifferenceDescription": "Common difference between terms (d)",
+    "numberOfTermsDescription": "Number of terms to generate (n)",
+    "outputFormat": "Output Format",
+    "separatorDescription": "Separator between terms",
+    "toolInfo": {
+      "title": "What is an Arithmetic Sequence?",
+      "description": "An arithmetic sequence is a sequence of numbers where the difference between each consecutive term is constant. This constant difference is called the common difference. Given the first term (a₁) and the common difference (d), each term can be found by adding the common difference to the previous term."
+    }
+  }
+}

src/pages/tools/number/sum/index.tsx

@@ -9,6 +9,7 @@ import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolContent from '@components/ToolContent';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   extractionType: 'smart' as NumberExtractionType,
@@ -118,6 +119,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function SumNumbers({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -126,16 +128,16 @@ export default function SumNumbers({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Number extraction',
+      title: t('number.sum.numberExtraction'),
       component: extractionTypes.map(
         ({ title, description, type, withTextField, textValueAccessor }) =>
           withTextField ? (
             <RadioWithTextField
               key={type}
               checked={type === values.extractionType}
-              title={title}
+              title={t(`number.sum.extractionTypes.${type}.title`)}
               fieldName={'extractionType'}
-              description={description}
+              description={t(`number.sum.extractionTypes.${type}.description`)}
               value={
                 textValueAccessor ? values[textValueAccessor].toString() : ''
               }
@@ -149,18 +151,18 @@ export default function SumNumbers({ title }: ToolComponentProps) {
               key={title}
               onClick={() => updateField('extractionType', type)}
               checked={values.extractionType === type}
-              description={description}
-              title={title}
+              description={t(`number.sum.extractionTypes.${type}.description`)}
+              title={t(`number.sum.extractionTypes.${type}.title`)}
             />
           )
       )
     },
     {
-      title: 'Running Sum',
+      title: t('number.sum.runningSum'),
       component: (
         <CheckboxWithDesc
-          title={'Print Running Sum'}
-          description={"Display the sum as it's calculated step by step."}
+          title={t('number.sum.printRunningSum')}
+          description={t('number.sum.printRunningSumDescription')}
           checked={values.printRunningSum}
           onChange={(value) => updateField('printRunningSum', value)}
         />
@@ -171,8 +173,16 @@ export default function SumNumbers({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       input={input}
-      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
-      resultComponent={<ToolTextResult title={'Total'} value={result} />}
+      inputComponent={
+        <ToolTextInput
+          title={t('number.sum.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult title={t('number.sum.resultTitle')} value={result} />
+      }
       initialValues={initialValues}
       getGroups={getGroups}
       compute={(optionsValues, input) => {
@@ -181,9 +191,8 @@ export default function SumNumbers({ title }: ToolComponentProps) {
       }}
       setInput={setInput}
       toolInfo={{
-        title: 'What Is a Number Sum Calculator?',
-        description:
-          'This is an online browser-based utility for calculating the sum of a bunch of numbers. You can enter the numbers separated by a comma, space, or any other character, including the line break. You can also simply paste a fragment of textual data that contains numerical values that you want to sum up and the utility will extract them and find their sum.'
+        title: t('number.sum.toolInfo.title'),
+        description: t('number.sum.toolInfo.description')
       }}
       exampleCards={exampleCards}
     />

src/pages/tools/number/sum/meta.ts

@@ -3,12 +3,17 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('number', {
-  name: 'Number Sum Calculator',
+  name: 'Sum',
   path: 'sum',
-  icon: 'fluent:autosum-20-regular',
+  icon: 'material-symbols:add',
   description:
-    'Quickly calculate the sum of numbers in your browser. To get your sum, just enter your list of numbers in the input field, adjust the separator between the numbers in the options below, and this utility will add up all these numbers.',
-  shortDescription: 'Quickly sum numbers',
-  keywords: ['sum'],
-  component: lazy(() => import('./index'))
+    'Calculate the sum of a list of numbers. Enter numbers separated by commas or newlines to get their total sum.',
+  shortDescription: 'Calculate sum of numbers',
+  keywords: ['sum', 'add', 'calculate', 'total'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'number.sum.name',
+    description: 'number.sum.description',
+    shortDescription: 'number.sum.shortDescription'
+  }
 });