feat: add new languages to selection (#626)

* Add new languages to selection

* more translations

apps/client/src/features/space/components/delete-space-modal.tsx

@@ -1,27 +1,29 @@
-import { Button, Divider, Group, Modal, Text, TextInput } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { useDeleteSpaceMutation } from '../queries/space-query';
-import { useField } from '@mantine/form';
-import { ISpace } from '../types/space.types';
-import { useNavigate } from 'react-router-dom';
-import APP_ROUTE from '@/lib/app-route';
+import { Button, Divider, Group, Modal, Text, TextInput } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useDeleteSpaceMutation } from "../queries/space-query";
+import { useField } from "@mantine/form";
+import { ISpace } from "../types/space.types";
+import { useNavigate } from "react-router-dom";
+import APP_ROUTE from "@/lib/app-route";
+import { Trans, useTranslation } from "react-i18next";
 
 interface DeleteSpaceModalProps {
   space: ISpace;
 }
 
 export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
+  const { t } = useTranslation();
   const [opened, { open, close }] = useDisclosure(false);
   const deleteSpaceMutation = useDeleteSpaceMutation();
   const navigate = useNavigate();
 
   const confirmNameField = useField({
-    initialValue: '',
+    initialValue: "",
     validateOnChange: true,
     validate: (value) =>
       value.trim().toLowerCase() === space.name.trim().toLocaleLowerCase()
         ? null
-        : 'Names do not match',
+        : t("Names do not match"),
   });
 
   const handleDelete = async () => {
@@ -38,46 +40,47 @@ export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
       await deleteSpaceMutation.mutateAsync({ id: space.id, slug: space.slug });
       navigate(APP_ROUTE.HOME);
     } catch (error) {
-      console.error('Failed to delete space', error);
+      console.error("Failed to delete space", error);
     }
   };
 
   return (
     <>
       <Button onClick={open} variant="light" color="red">
-        Delete
+        {t("Delete")}
       </Button>
 
       <Modal
         opened={opened}
         onClose={close}
-        title="Are you sure you want to delete this space?"
+        title={t("Are you sure you want to delete this space?")}
       >
         <Divider size="xs" mb="xs" />
         <Text>
-          All pages, comments, attachments and permissions in this space will be
-          deleted irreversibly.
+          {t(
+            "All pages, comments, attachments and permissions in this space will be deleted irreversibly.",
+          )}
         </Text>
         <Text mt="sm">
-          Type the space name{' '}
-          <Text span fw={500}>
-            '{space.name}'
-          </Text>{' '}
-          to confirm your action.
+          <Trans
+            defaults="Type the space name <b>{{spaceName}}</b> to confirm your action."
+            values={{ spaceName: space.name }}
+            components={{ b: <Text span fw={500} /> }}
+          />
         </Text>
         <TextInput
           {...confirmNameField.getInputProps()}
           variant="filled"
-          placeholder="Confirm space name"
+          placeholder={t("Confirm space name")}
           py="sm"
           data-autofocus
         />
         <Group justify="flex-end" mt="md">
           <Button onClick={close} variant="default">
-            Cancel
+            {t("Cancel")}
           </Button>
           <Button onClick={handleDelete} color="red">
-            Confirm
+            {t("Confirm")}
           </Button>
         </Group>
       </Modal>