✨ add language switch, add german

src/components/AppShelf/AppShelfMenu.tsx

@@ -2,6 +2,7 @@ import { ActionIcon, Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
 import { IconCheck as Check, IconEdit as Edit, IconMenu, IconTrash as Trash } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
@@ -11,7 +12,7 @@ export default function AppShelfMenu(props: any) {
   const { service }: { service: serviceItem } = props;
   const { config, setConfig } = useConfig();
   const { secondaryColor } = useColorTheme();
-  const theme = useMantineTheme();
+  const { t } = useTranslation('layout/app-shelf-menu');
   const [opened, setOpened] = useState(false);
   return (
     <>
@@ -20,9 +21,9 @@ export default function AppShelfMenu(props: any) {
         radius="md"
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
-        title="Modify a service"
+        title={t('modal.title')}
       >
-        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
+        <AddAppShelfItemForm setOpened={setOpened} {...service} message={t('modal.buttons.save')} />
       </Modal>
       <Menu
         withinPortal
@@ -44,11 +45,11 @@ export default function AppShelfMenu(props: any) {
           </ActionIcon>
         </Menu.Target>
         <Menu.Dropdown>
-          <Menu.Label>Settings</Menu.Label>
+          <Menu.Label>{t('menu.labels.settings')}</Menu.Label>
           <Menu.Item color={secondaryColor} icon={<Edit />} onClick={() => setOpened(true)}>
-            Edit
+            {t('menu.actions.edit')}
           </Menu.Item>
-          <Menu.Label>Danger zone</Menu.Label>
+          <Menu.Label>{t('menu.labels.dangerZone')}</Menu.Label>
           <Menu.Item
             color="red"
             onClick={(e: any) => {
@@ -70,7 +71,7 @@ export default function AppShelfMenu(props: any) {
             }}
             icon={<Trash />}
           >
-            Delete
+            {t('menu.actions.delete')}
           </Menu.Item>
         </Menu.Dropdown>
       </Menu>