added internationalization to pages [WIP]

pages/admin.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import UserListing from "@/components/UserListing";
 
 interface User extends U {
   subscriptions: {
@@ -64,7 +65,7 @@ export default function Admin() {
             <input
               id="search-box"
               type="text"
-              placeholder={"Search for Users"}
+              placeholder={t("search_users")}
               value={searchQuery}
               onChange={(e) => {
                 setSearchQuery(e.target.value);
@@ -95,13 +96,13 @@ export default function Admin() {
       <div className="divider my-3"></div>
 
       {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
-        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal)
+        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal, t)
       ) : searchQuery !== "" ? (
-        <p>No users found with the given search query.</p>
+        <p>{t("no_user_found_in_search")}</p>
       ) : users && users.length > 0 ? (
-        UserListing(users, deleteUserModal, setDeleteUserModal)
+        UserListing(users, deleteUserModal, setDeleteUserModal, t)
       ) : (
-        <p>No users found.</p>
+        <p>{t("no_users_found")}</p>
       )}
 
       {newUserModal ? (
@@ -111,70 +112,4 @@ export default function Admin() {
   );
 }
 
-const UserListing = (
-  users: User[],
-  deleteUserModal: UserModal,
-  setDeleteUserModal: Function
-) => {
-  return (
-    <div className="overflow-x-auto whitespace-nowrap w-full">
-      <table className="table w-full">
-        <thead>
-          <tr>
-            <th></th>
-            <th>Username</th>
-            {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
-              <th>Email</th>
-            )}
-            {process.env.NEXT_PUBLIC_STRIPE === "true" && <th>Subscribed</th>}
-            <th>Created At</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((user, index) => (
-            <tr
-              key={index}
-              className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
-            >
-              <td className="text-primary">{index + 1}</td>
-              <td>{user.username ? user.username : <b>N/A</b>}</td>
-              {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
-                <td>{user.email}</td>
-              )}
-              {process.env.NEXT_PUBLIC_STRIPE === "true" && (
-                <td>
-                  {user.subscriptions?.active ? (
-                    JSON.stringify(user.subscriptions?.active)
-                  ) : (
-                    <b>N/A</b>
-                  )}
-                </td>
-              )}
-              <td>{new Date(user.createdAt).toLocaleString()}</td>
-              <td className="relative">
-                <button
-                  className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
-                  onClick={() =>
-                    setDeleteUserModal({ isOpen: true, userId: user.id })
-                  }
-                >
-                  <i className="bi bi-trash"></i>
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {deleteUserModal.isOpen && deleteUserModal.userId ? (
-        <DeleteUserModal
-          onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
-          userId={deleteUserModal.userId}
-        />
-      ) : null}
-    </div>
-  );
-};
-
 export { getServerSideProps };