client side i18n fully implemented

components/ModalContent/EmailChangeVerificationModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -15,39 +16,40 @@ export default function EmailChangeVerificationModal({
   oldEmail,
   newEmail,
 }: Props) {
+  const { t } = useTranslation();
   const [password, setPassword] = useState("");
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Confirm Password</p>
+      <p className="text-xl font-thin">{t("confirm_password")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-5">
         <p>
-          Please confirm your password before changing your email address.{" "}
-          {process.env.NEXT_PUBLIC_STRIPE === "true" &&
-            "Updating this field will change your billing email on Stripe as well."}
+          {t("password_change_warning")}
+          {process.env.NEXT_PUBLIC_STRIPE === "true" && t("stripe_update_note")}
         </p>
 
         <p>
-          If you change your email address, any existing{" "}
-          {process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" && "Google"} SSO
-          connections will be removed.
+          {t("sso_will_be_removed_warning", {
+            service:
+              process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" ? "Google" : "",
+          })}
         </p>
 
         <div>
-          <p>Old Email</p>
+          <p>{t("old_email")}</p>
           <p className="text-neutral">{oldEmail}</p>
         </div>
 
         <div>
-          <p>New Email</p>
+          <p>{t("new_email")}</p>
           <p className="text-neutral">{newEmail}</p>
         </div>
 
         <div className="w-full">
-          <p className="mb-2">Password</p>
+          <p className="mb-2">{t("password")}</p>
           <TextInput
             value={password}
             onChange={(e) => setPassword(e.target.value)}
@@ -63,7 +65,7 @@ export default function EmailChangeVerificationModal({
             className="btn btn-accent dark:border-violet-400 text-white"
             onClick={() => onSubmit(password)}
           >
-            Confirm
+            {t("confirm")}
           </button>
         </div>
       </div>