client side i18n fully implemented

components/ModalContent/DeleteUserModal.tsx

@@ -2,6 +2,7 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 import useUserStore from "@/store/admin/users";
 import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -9,39 +10,40 @@ type Props = {
 };
 
 export default function DeleteUserModal({ onClose, userId }: Props) {
+  const { t } = useTranslation();
   const { removeUser } = useUserStore();
 
   const deleteUser = async () => {
-    const load = toast.loading("Deleting...");
+    const load = toast.loading(t("deleting_user"));
 
     const response = await removeUser(userId);
 
     toast.dismiss(load);
 
-    response.ok && toast.success(`User Deleted.`);
+    response.ok && toast.success(t("user_deleted"));
 
     onClose();
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">Delete User</p>
+      <p className="text-xl font-thin text-red-500">{t("delete_user")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <p>Are you sure you want to remove this user?</p>
+        <p>{t("confirm_user_deletion")}</p>
 
         <div role="alert" className="alert alert-warning">
           <i className="bi-exclamation-triangle text-xl" />
           <span>
-            <b>Warning:</b> This action is irreversible!
+            <b>{t("warning")}:</b> {t("irreversible_action_warning")}
           </span>
         </div>
 
         <Button className="ml-auto" intent="destructive" onClick={deleteUser}>
           <i className="bi-trash text-xl" />
-          Delete, I know what I&apos;m doing
+          {t("delete_confirmation")}
         </Button>
       </div>
     </Modal>