feat: add internationalization support

src/pages/tools/video/loop/index.tsx

@@ -11,6 +11,7 @@ import ToolFileResult from '@components/result/ToolFileResult';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { updateNumberField } from '@utils/string';
 import * as Yup from 'yup';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   loops: 2
@@ -21,6 +22,7 @@ const validationSchema = Yup.object({
 });
 
 export default function Loop({ title, longDescription }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
@@ -43,7 +45,7 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Loops',
+      title: t('video.loop.loops'),
       component: (
         <Box>
           <TextFieldWithDesc
@@ -51,7 +53,7 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
               updateNumberField(value, 'loops', updateField)
             }
             value={values.loops}
-            label={'Number of Loops'}
+            label={t('video.loop.numberOfLoops')}
           />
         </Box>
       )
@@ -66,14 +68,14 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
         loading ? (
           <ToolFileResult
             value={null}
-            title={'Looping Video'}
+            title={t('video.loop.loopingVideo')}
             loading={true}
             extension={''}
           />
         ) : (
           <ToolFileResult
             value={result}
-            title={'Looped Video'}
+            title={t('video.loop.resultTitle')}
             extension={'mp4'}
           />
         )
@@ -83,7 +85,10 @@ export default function Loop({ title, longDescription }: ToolComponentProps) {
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('video.loop.toolInfo.title', { title }),
+        description: longDescription
+      }}
     />
   );
 }

src/pages/tools/video/loop/meta.ts

@@ -4,10 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('video', {
   name: 'Loop Video',
   path: 'loop',
-  icon: 'ic:baseline-loop',
+  icon: 'material-symbols:loop',
   description:
-    'This online utility lets you loop videos by specifying the number of repetitions. You can preview the looped video before processing. Supports common video formats like MP4, WebM, and OGG.',
-  shortDescription: 'Loop videos multiple times',
-  keywords: ['loop', 'video', 'repeat', 'duplicate', 'sequence', 'playback'],
-  component: lazy(() => import('./index'))
+    'Create looping video files that repeat continuously. Perfect for background videos, presentations, or creating seamless loops.',
+  shortDescription: 'Create looping video files',
+  keywords: ['video', 'loop', 'repeat', 'continuous'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'video.loop.name',
+    description: 'video.loop.description',
+    shortDescription: 'video.loop.shortDescription'
+  }
 });