client side i18n fully implemented

components/ModalContent/NewCollectionModal.tsx

@@ -8,6 +8,7 @@ import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useAccountStore from "@/store/account";
 import { useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -15,6 +16,7 @@ type Props = {
 };
 
 export default function NewCollectionModal({ onClose, parent }: Props) {
+  const { t } = useTranslation();
   const initial = {
     parentId: parent?.id,
     name: "",
@@ -39,15 +41,14 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     setSubmitLoader(true);
 
-    const load = toast.loading("Creating...");
+    const load = toast.loading(t("creating"));
 
     let response = await addCollection(collection as any);
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success("Created!");
+      toast.success(t("created"));
       if (response.data) {
-        // If the collection was created successfully, we need to get the new collection order
         setAccount(data?.user.id as number);
         onClose();
       }
@@ -60,11 +61,13 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
     <Modal toggleModal={onClose}>
       {parent?.id ? (
         <>
-          <p className="text-xl font-thin">New Sub-Collection</p>
-          <p className="capitalize text-sm">For {parent.name}</p>
+          <p className="text-xl font-thin">{t("new_sub_collection")}</p>
+          <p className="capitalize text-sm">
+            {t("for_collection", { name: parent.name })}
+          </p>
         </>
       ) : (
-        <p className="text-xl font-thin">Create a New Collection</p>
+        <p className="text-xl font-thin">{t("create_new_collection")}</p>
       )}
 
       <div className="divider mb-3 mt-1"></div>
@@ -72,19 +75,25 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
       <div className="flex flex-col gap-3">
         <div className="flex flex-col sm:flex-row gap-3">
           <div className="w-full">
-            <p className="mb-2">Name</p>
-            <div className="flex flex-col gap-3">
+            <p className="mb-2">{t("name")}</p>
+            <div className="flex flex-col gap-2">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
-                placeholder="e.g. Example Collection"
+                placeholder={t("collection_name_placeholder")}
                 onChange={(e) =>
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
               <div>
-                <p className="w-full mb-2">Color</p>
-                <div className="color-picker flex justify-between">
+                <p className="w-full mb-2">{t("color")}</p>
+                <div className="color-picker flex justify-between items-center">
+                  <HexColorPicker
+                    color={collection.color}
+                    onChange={(color) =>
+                      setCollection({ ...collection, color })
+                    }
+                  />
                   <div className="flex flex-col gap-2 items-center w-32">
                     <i
                       className={"bi-folder-fill text-5xl"}
@@ -96,29 +105,22 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
                         setCollection({ ...collection, color: "#0ea5e9" })
                       }
                     >
-                      Reset
+                      {t("reset")}
                     </div>
                   </div>
-                  <HexColorPicker
-                    color={collection.color}
-                    onChange={(e) => setCollection({ ...collection, color: e })}
-                  />
                 </div>
               </div>
             </div>
           </div>
 
           <div className="w-full">
-            <p className="mb-2">Description</p>
+            <p className="mb-2">{t("description")}</p>
             <textarea
               className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
-              placeholder="The purpose of this Collection..."
+              placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>
-                setCollection({
-                  ...collection,
-                  description: e.target.value,
-                })
+                setCollection({ ...collection, description: e.target.value })
               }
             />
           </div>
@@ -128,7 +130,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
-          Create Collection
+          {t("create_collection_button")}
         </button>
       </div>
     </Modal>