feat: add internationalization support

src/pages/tools/image/generic/resize/index.tsx

@@ -11,6 +11,7 @@ import SimpleRadio from '@components/options/SimpleRadio';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import { processImage } from './service';
 import { InitialValuesType } from './types';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   resizeMethod: 'pixels' as 'pixels' | 'percentage',
@@ -45,6 +46,7 @@ const validationSchema = Yup.object({
 });
 
 export default function ResizeImage({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
@@ -58,22 +60,20 @@ export default function ResizeImage({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Resize Method',
+      title: t('image.resize.resizeMethod'),
       component: (
         <Box>
           <SimpleRadio
             onClick={() => updateField('resizeMethod', 'pixels')}
             checked={values.resizeMethod === 'pixels'}
-            description={'Resize by specifying dimensions in pixels.'}
-            title={'Resize by Pixels'}
+            description={t('image.resize.resizeByPixelsDescription')}
+            title={t('image.resize.resizeByPixels')}
           />
           <SimpleRadio
             onClick={() => updateField('resizeMethod', 'percentage')}
             checked={values.resizeMethod === 'percentage'}
-            description={
-              'Resize by specifying a percentage of the original size.'
-            }
-            title={'Resize by Percentage'}
+            description={t('image.resize.resizeByPercentageDescription')}
+            title={t('image.resize.resizeByPercentage')}
           />
         </Box>
       )
@@ -81,7 +81,7 @@ export default function ResizeImage({ title }: ToolComponentProps) {
     ...(values.resizeMethod === 'pixels'
       ? [
           {
-            title: 'Dimension Type',
+            title: t('image.resize.dimensionType'),
             component: (
               <Box>
                 <CheckboxWithDesc
@@ -89,35 +89,29 @@ export default function ResizeImage({ title }: ToolComponentProps) {
                   onChange={(value) =>
                     updateField('maintainAspectRatio', value)
                   }
-                  description={
-                    'Maintain the original aspect ratio of the image.'
-                  }
-                  title={'Maintain Aspect Ratio'}
+                  description={t('image.resize.maintainAspectRatioDescription')}
+                  title={t('image.resize.maintainAspectRatio')}
                 />
                 {values.maintainAspectRatio && (
                   <Box>
                     <SimpleRadio
                       onClick={() => updateField('dimensionType', 'width')}
                       checked={values.dimensionType === 'width'}
-                      description={
-                        'Specify the width in pixels and calculate height based on aspect ratio.'
-                      }
-                      title={'Set Width'}
+                      description={t('image.resize.setWidthDescription')}
+                      title={t('image.resize.setWidth')}
                     />
                     <SimpleRadio
                       onClick={() => updateField('dimensionType', 'height')}
                       checked={values.dimensionType === 'height'}
-                      description={
-                        'Specify the height in pixels and calculate width based on aspect ratio.'
-                      }
-                      title={'Set Height'}
+                      description={t('image.resize.setHeightDescription')}
+                      title={t('image.resize.setHeight')}
                     />
                   </Box>
                 )}
                 <TextFieldWithDesc
                   value={values.width}
                   onOwnChange={(val) => updateField('width', val)}
-                  description={'Width (in pixels)'}
+                  description={t('image.resize.widthDescription')}
                   disabled={
                     values.maintainAspectRatio &&
                     values.dimensionType === 'height'
@@ -131,7 +125,7 @@ export default function ResizeImage({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.height}
                   onOwnChange={(val) => updateField('height', val)}
-                  description={'Height (in pixels)'}
+                  description={t('image.resize.heightDescription')}
                   disabled={
                     values.maintainAspectRatio &&
                     values.dimensionType === 'width'
@@ -148,15 +142,13 @@ export default function ResizeImage({ title }: ToolComponentProps) {
         ]
       : [
           {
-            title: 'Percentage',
+            title: t('image.resize.percentage'),
             component: (
               <Box>
                 <TextFieldWithDesc
                   value={values.percentage}
                   onOwnChange={(val) => updateField('percentage', val)}
-                  description={
-                    'Percentage of original size (e.g., 50 for half size, 200 for double size)'
-                  }
+                  description={t('image.resize.percentageDescription')}
                   inputProps={{
                     'data-testid': 'percentage-input',
                     type: 'number',
@@ -183,20 +175,19 @@ export default function ResizeImage({ title }: ToolComponentProps) {
           value={input}
           onChange={setInput}
           accept={['image/jpeg', 'image/png', 'image/svg+xml', 'image/gif']}
-          title={'Input Image'}
+          title={t('image.resize.inputTitle')}
         />
       }
       resultComponent={
         <ToolFileResult
-          title={'Resized Image'}
+          title={t('image.resize.resultTitle')}
           value={result}
           extension={input?.name.split('.').pop() || 'png'}
         />
       }
       toolInfo={{
-        title: 'Resize Image',
-        description:
-          'This tool allows you to resize JPG, PNG, SVG, or GIF images. You can resize by specifying dimensions in pixels or by percentage, with options to maintain the original aspect ratio.'
+        title: t('image.resize.toolInfo.title'),
+        description: t('image.resize.toolInfo.description')
       }}
     />
   );

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

@@ -0,0 +1,40 @@
+{
+  "resize": {
+    "title": "Resize Image",
+    "description": "Resize images to different dimensions.",
+    "inputTitle": "Input Image",
+    "resultTitle": "Resized Image",
+    "resizeMethod": "Resize Method",
+    "resizeByPixels": "Resize by Pixels",
+    "resizeByPixelsDescription": "Resize by specifying dimensions in pixels.",
+    "resizeByPercentage": "Resize by Percentage",
+    "resizeByPercentageDescription": "Resize by specifying a percentage of the original size.",
+    "dimensionType": "Dimension Type",
+    "maintainAspectRatio": "Maintain Aspect Ratio",
+    "maintainAspectRatioDescription": "Maintain the original aspect ratio of the image.",
+    "setWidth": "Set Width",
+    "setWidthDescription": "Specify the width in pixels and calculate height based on aspect ratio.",
+    "setHeight": "Set Height",
+    "setHeightDescription": "Specify the height in pixels and calculate width based on aspect ratio.",
+    "widthDescription": "Width (in pixels)",
+    "heightDescription": "Height (in pixels)",
+    "percentage": "Percentage",
+    "percentageDescription": "Percentage of original size (e.g., 50 for half size, 200 for double size)",
+    "toolInfo": {
+      "title": "Resize Image",
+      "description": "This tool allows you to resize JPG, PNG, SVG, or GIF images. You can resize by specifying dimensions in pixels or by percentage, with options to maintain the original aspect ratio."
+    }
+  },
+  "compress": {
+    "title": "Compress Image",
+    "description": "Reduce image file size while maintaining quality.",
+    "inputTitle": "Input image",
+    "resultTitle": "Compressed image"
+  },
+  "crop": {
+    "title": "Crop Image",
+    "description": "Crop images to remove unwanted areas.",
+    "inputTitle": "Input image",
+    "resultTitle": "Cropped image"
+  }
+}