🚧 wip extract to translations file

src/modules/docker/DockerModule.tsx

@@ -4,6 +4,8 @@ import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
 import { IconBrandDocker, IconX } from '@tabler/icons';
 import { showNotification } from '@mantine/notifications';
+import { t } from 'i18next';
+
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
 import { useConfig } from '../../tools/state';
@@ -42,10 +44,10 @@ export default function DockerMenuButton(props: any) {
           // Send an Error notification
           showNotification({
             autoClose: 1500,
-            title: <Text>Docker integration failed</Text>,
+            title: <Text>{t('layout.header.docker.errors.integrationFailed.title')}</Text>,
             color: 'red',
             icon: <IconX />,
-            message: 'Did you forget to mount the docker socket ?',
+            message: t('layout.header.docker.errors.integrationFailed.message'),
           })
         );
     }, 300);
@@ -67,7 +69,7 @@ export default function DockerMenuButton(props: any) {
       >
         <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
       </Drawer>
-      <Tooltip label="Docker">
+      <Tooltip label={t('layout.header.docker.actionIcon.tooltip')}>
         <ActionIcon
           variant="default"
           radius="md"

src/modules/docker/DockerTable.tsx

@@ -1,5 +1,7 @@
 import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons';
+import { t } from 'i18next';
+
 import Dockerode from 'dockerode';
 import { useEffect, useState } from 'react';
 import ContainerState from './ContainerState';
@@ -80,7 +82,9 @@ export default function DockerTable({
                 </Badge>
               ))}
             {element.Ports.length > 3 && (
-              <Badge variant="filled">{element.Ports.length - 3} more</Badge>
+              <Badge variant="filled">
+                {t('modules.docker.table.body.portCollapse', { ports: element.Ports.length - 3 })}
+              </Badge>
             )}
           </Group>
         </td>
@@ -94,7 +98,7 @@ export default function DockerTable({
   return (
     <ScrollArea style={{ height: '80vh' }}>
       <TextInput
-        placeholder="Search by container or image name"
+        placeholder={t('modules.docker.search.placeholder')}
         mt="md"
         icon={<IconSearch size={14} />}
         value={search}
@@ -111,10 +115,10 @@ export default function DockerTable({
                 transitionDuration={0}
               />
             </th>
-            <th>Name</th>
-            <th>Image</th>
-            <th>Ports</th>
-            <th>State</th>
+            <th>{t('modules.docker.table.header.name')}</th>
+            <th>{t('modules.docker.table.header.image')}</th>
+            <th>{t('modules.docker.table.header.ports')}</th>
+            <th>{t('modules.docker.table.header.state')}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>