client side i18n fully implemented

components/ModalContent/DeleteCollectionModal.tsx

@@ -7,6 +7,7 @@ import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import Modal from "../Modal";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -17,42 +18,40 @@ export default function DeleteCollectionModal({
   onClose,
   activeCollection,
 }: Props) {
+  const { t } = useTranslation();
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { removeCollection } = useCollectionStore();
+  const router = useRouter();
+  const [inputField, setInputField] = useState("");
+  const permissions = usePermissions(collection.id as number);
 
   useEffect(() => {
     setCollection(activeCollection);
   }, []);
 
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { removeCollection } = useCollectionStore();
-  const router = useRouter();
-  const [inputField, setInputField] = useState("");
-
-  const permissions = usePermissions(collection.id as number);
-
   const submit = async () => {
-    if (permissions === true) if (collection.name !== inputField) return null;
-
+    if (permissions === true && collection.name !== inputField) return;
     if (!submitLoader) {
       setSubmitLoader(true);
       if (!collection) return null;
 
       setSubmitLoader(true);
 
-      const load = toast.loading("Deleting...");
+      const load = toast.loading(t("deleting_collection"));
 
-      let response;
-
-      response = await removeCollection(collection.id as any);
+      let response = await removeCollection(collection.id as number);
 
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(`Deleted.`);
+        toast.success(t("deleted"));
         onClose();
         router.push("/collections");
-      } else toast.error(response.data as string);
+      } else {
+        toast.error(response.data as string);
+      }
 
       setSubmitLoader(false);
     }
@@ -61,7 +60,7 @@ export default function DeleteCollectionModal({
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">
-        {permissions === true ? "Delete" : "Leave"} Collection
+        {permissions === true ? t("delete_collection") : t("leave_collection")}
       </p>
 
       <div className="divider mb-3 mt-1"></div>
@@ -69,32 +68,26 @@ export default function DeleteCollectionModal({
       <div className="flex flex-col gap-3">
         {permissions === true ? (
           <>
-            <div className="flex flex-col gap-3">
-              <p>
-                To confirm, type &quot;
-                <span className="font-bold">{collection.name}</span>
-                &quot; in the box below:
-              </p>
-
-              <TextInput
-                value={inputField}
-                onChange={(e) => setInputField(e.target.value)}
-                placeholder={`Type "${collection.name}" Here.`}
-                className="w-3/4 mx-auto"
-              />
-            </div>
+            <p>{t("confirm_deletion_prompt", { name: collection.name })}</p>
+            <TextInput
+              value={inputField}
+              onChange={(e) => setInputField(e.target.value)}
+              placeholder={t("type_name_placeholder", {
+                name: collection.name,
+              })}
+              className="w-3/4 mx-auto"
+            />
 
             <div role="alert" className="alert alert-warning">
               <i className="bi-exclamation-triangle text-xl"></i>
               <span>
-                <b>Warning:</b> Deleting this collection will permanently erase
-                all its contents, and it will become inaccessible to everyone,
-                including members with previous access.
+                <b>{t("warning")}: </b>
+                {t("deletion_warning")}
               </span>
             </div>
           </>
         ) : (
-          <p>Click the button below to leave the current collection.</p>
+          <p>{t("leave_prompt")}</p>
         )}
 
         <Button
@@ -104,7 +97,7 @@ export default function DeleteCollectionModal({
           className="ml-auto"
         >
           <i className="bi-trash text-xl"></i>
-          {permissions === true ? "Delete" : "Leave"} Collection
+          {permissions === true ? t("delete") : t("leave")}
         </Button>
       </div>
     </Modal>