tab-seperated modals + eslint fix + much more bug fixed and improvements

components/Modal/ChangePassword.tsx

@@ -1,71 +0,0 @@
-import React, { useState } from "react";
-import { AccountSettings } from "@/types/global";
-
-type Props = {
-  togglePasswordFormModal: Function;
-  user: AccountSettings;
-  setPasswordForm: Function;
-};
-
-export default function ChangePassword({
-  togglePasswordFormModal,
-  user,
-  setPasswordForm,
-}: Props) {
-  const [oldPassword, setOldPassword] = useState("");
-  const [newPassword1, setNewPassword1] = useState("");
-  const [newPassword2, setNewPassword2] = useState("");
-
-  const submit = async () => {
-    if (oldPassword !== "" && newPassword1 !== "" && newPassword2 !== "") {
-      if (newPassword1 === newPassword2) {
-        setPasswordForm(oldPassword, newPassword1);
-        togglePasswordFormModal();
-      } else {
-        console.log("Passwords do not match.");
-      }
-    } else {
-      console.log("Please fill out all the fields.");
-    }
-  };
-
-  return (
-    <div className="sm:w-[33rem] w-72">
-      <div className="max-w-sm mx-auto flex flex-col gap-3">
-        <p className="text-xl text-sky-500 mb-2 text-center">Change Password</p>
-
-        <p className="text-sm text-sky-500">Old Password</p>
-
-        <input
-          value={oldPassword}
-          onChange={(e) => setOldPassword(e.target.value)}
-          type="text"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-        <p className="text-sm text-sky-500">New Password</p>
-
-        <input
-          value={newPassword1}
-          onChange={(e) => setNewPassword1(e.target.value)}
-          type="text"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-        <p className="text-sm text-sky-500">Re-enter New Password</p>
-
-        <input
-          value={newPassword2}
-          onChange={(e) => setNewPassword2(e.target.value)}
-          type="text"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-
-        <div
-          className="mx-auto mt-2  text-white flex items-center gap-2 py-2 px-5 rounded-md select-none duration-100 bg-sky-500 hover:bg-sky-400 cursor-pointer"
-          onClick={submit}
-        >
-          Save
-        </div>
-      </div>
-    </div>
-  );
-}

components/Modal/Collection/CollectionInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { Dispatch, SetStateAction } from "react";
 import {
   faFolder,
   faPenToSquare,
@@ -13,18 +13,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
   toggleCollectionModal: Function;
-  activeCollection: CollectionIncludingMembers;
+  setCollection: Dispatch<SetStateAction<CollectionIncludingMembers>>;
+  collection: CollectionIncludingMembers;
   method: "CREATE" | "UPDATE";
 };
 
 export default function CollectionInfo({
   toggleCollectionModal,
-  activeCollection,
+  setCollection,
+  collection,
   method,
 }: Props) {
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembers>(activeCollection);
-
   const { updateCollection, addCollection } = useCollectionStore();
 
   const submit = async () => {
@@ -41,10 +40,6 @@ export default function CollectionInfo({
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center">
-        {method === "CREATE" ? "Add" : "Edit"} Collection
-      </p>
-
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
           <p className="text-sm text-sky-500 mb-2">

components/Modal/Collection/DeleteCollection.tsx

@@ -21,7 +21,7 @@ export default function DeleteCollection({
   const router = useRouter();
 
   const submit = async () => {
-    if (!collection.id) return null;
+    if (!collection.id || collection.name !== inputField) return null;
 
     const response = await removeCollection(collection.id);
     if (response) {
@@ -31,23 +31,56 @@ export default function DeleteCollection({
   };
 
   return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center">Delete Collection</p>
+    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
+      <p className="text-red-500 font-bold text-center">Warning!</p>
 
-      <p className="text-sky-900 select-none text-center">
-        To confirm, type "
-        <span className="font-bold text-sky-500">{collection.name}</span>" in
-        the box below:
-      </p>
+      <div className="max-h-[20rem] overflow-y-auto">
+        <div className="text-gray-500">
+          <p>
+            Please note that deleting the collection will permanently remove all
+            its contents, including the following:
+          </p>
+          <div className="p-3">
+            <li className="list-inside">
+              Links: All links within the collection will be permanently
+              deleted.
+            </li>
+            <li className="list-inside">
+              Tags: All tags associated with the collection will be removed.
+            </li>
+            <li className="list-inside">
+              Screenshots/PDFs: Any screenshots or PDFs attached to links within
+              this collection will be permanently deleted.
+            </li>
+            <li className="list-inside">
+              Members: Any members who have been granted access to the
+              collection will lose their permissions and no longer be able to
+              view or interact with the content.
+            </li>
+          </div>
+          <p>
+            Please double-check that you have backed up any essential data and
+            have informed the relevant members about this action.
+          </p>
+        </div>
+      </div>
 
-      <input
-        autoFocus
-        value={inputField}
-        onChange={(e) => setInputField(e.target.value)}
-        type="text"
-        placeholder={`Type "${collection.name}" Here.`}
-        className=" w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-      />
+      <div className="flex flex-col gap-3">
+        <p className="text-sky-900 select-none text-center">
+          To confirm, type &quot;
+          <span className="font-bold text-sky-500">{collection.name}</span>
+          &quot; in the box below:
+        </p>
+
+        <input
+          autoFocus
+          value={inputField}
+          onChange={(e) => setInputField(e.target.value)}
+          type="text"
+          placeholder={`Type "${collection.name}" Here.`}
+          className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
 
       <div
         className={`mx-auto mt-2  text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${

components/Modal/Collection/TeamManagement.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
   faPenToSquare,
+  faPlus,
   faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
@@ -15,16 +16,17 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 
 type Props = {
   toggleCollectionModal: Function;
-  activeCollection: CollectionIncludingMembers;
+  setCollection: Dispatch<SetStateAction<CollectionIncludingMembers>>;
+  collection: CollectionIncludingMembers;
+  method: "CREATE" | "UPDATE";
 };
 
 export default function TeamManagement({
   toggleCollectionModal,
-  activeCollection,
+  setCollection,
+  collection,
+  method,
 }: Props) {
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembers>(activeCollection);
-
   const currentURL = new URL(document.URL);
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
@@ -39,7 +41,7 @@ export default function TeamManagement({
     },
   });
 
-  const { updateCollection } = useCollectionStore();
+  const { addCollection, updateCollection } = useCollectionStore();
 
   const session = useSession();
 
@@ -65,17 +67,17 @@ export default function TeamManagement({
   const submit = async () => {
     if (!collection) return null;
 
-    const response = await updateCollection(collection);
+    let response = null;
+
+    if (method === "CREATE") response = await addCollection(collection);
+    else if (method === "UPDATE") response = await updateCollection(collection);
+    else console.log("Unknown method.");
 
     if (response) toggleCollectionModal();
   };
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto">
-        Sharing & Collaboration
-      </p>
-
       <p className="text-sm text-sky-500">Make Public</p>
 
       <Checkbox
@@ -153,12 +155,12 @@ export default function TeamManagement({
           <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
         </div>
       </div>
-      {collection?.members[0]?.user ? (
+
+      {collection?.members[0]?.user && (
         <>
           <p className="text-center text-gray-500 text-xs sm:text-sm">
             (All Members have <b>Read</b> access to this collection.)
           </p>
-
           <div className="max-h-[20rem] overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
             {collection.members
               .sort((a, b) => (a.userId as number) - (b.userId as number))
@@ -297,12 +299,12 @@ export default function TeamManagement({
               })}
           </div>
         </>
-      ) : null}
+      )}
 
       <SubmitButton
         onClick={submit}
-        label="Edit Collection"
-        icon={faPenToSquare}
+        label={method === "CREATE" ? "Add Collection" : "Edit Collection"}
+        icon={method === "CREATE" ? faPlus : faPenToSquare}
         className="mx-auto mt-2"
       />
     </div>

components/Modal/Collection/index.tsx

@@ -0,0 +1,102 @@
+import { Tab } from "@headlessui/react";
+import CollectionInfo from "./CollectionInfo";
+import { CollectionIncludingMembers } from "@/types/global";
+import TeamManagement from "./TeamManagement";
+import { useState } from "react";
+import DeleteCollection from "./DeleteCollection";
+
+type Props = {
+  toggleCollectionModal: Function;
+  activeCollection: CollectionIncludingMembers;
+  method: "CREATE" | "UPDATE";
+  className?: string;
+  defaultIndex?: number;
+};
+
+export default function CollectionModal({
+  className,
+  defaultIndex,
+  toggleCollectionModal,
+  activeCollection,
+  method,
+}: Props) {
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembers>(activeCollection);
+
+  return (
+    <div className={className}>
+      <Tab.Group defaultIndex={defaultIndex}>
+        <p
+          className={`text-xl text-sky-500 text-center ${
+            method === "UPDATE" && "mb-5"
+          }`}
+        >
+          {method === "CREATE" && "Add"} Collection{" "}
+          {method === "UPDATE" && "Settings"}
+        </p>
+        <Tab.List className="flex justify-center flex-col sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
+          {method === "UPDATE" && (
+            <>
+              <Tab
+                className={({ selected }) =>
+                  selected
+                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                }
+              >
+                Collection Info
+              </Tab>
+              <Tab
+                className={({ selected }) =>
+                  selected
+                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                }
+              >
+                Share & Collaborate
+              </Tab>
+              <Tab
+                className={({ selected }) =>
+                  selected
+                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                }
+              >
+                Delete Collection
+              </Tab>
+            </>
+          )}
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>
+            <CollectionInfo
+              toggleCollectionModal={toggleCollectionModal}
+              setCollection={setCollection}
+              collection={collection}
+              method={method}
+            />
+          </Tab.Panel>
+
+          {method === "UPDATE" && (
+            <>
+              <Tab.Panel>
+                <TeamManagement
+                  toggleCollectionModal={toggleCollectionModal}
+                  setCollection={setCollection}
+                  collection={collection}
+                  method={method}
+                />
+              </Tab.Panel>
+              <Tab.Panel>
+                <DeleteCollection
+                  toggleDeleteCollectionModal={toggleCollectionModal}
+                  collection={collection}
+                />
+              </Tab.Panel>
+            </>
+          )}
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+}

components/Modal/User/ChangePassword.tsx

@@ -0,0 +1,90 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { AccountSettings } from "@/types/global";
+import useAccountStore from "@/store/account";
+import { useSession } from "next-auth/react";
+import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
+import SubmitButton from "@/components/SubmitButton";
+
+type Props = {
+  togglePasswordFormModal: Function;
+  setUser: Dispatch<SetStateAction<AccountSettings>>;
+  user: AccountSettings;
+};
+
+export default function ChangePassword({
+  togglePasswordFormModal,
+  setUser,
+  user,
+}: Props) {
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword1] = useState("");
+  const [newPassword2, setNewPassword2] = useState("");
+
+  const { account, updateAccount } = useAccountStore();
+  const { update } = useSession();
+
+  useEffect(() => {
+    if (
+      !(oldPassword == "" || newPassword == "" || newPassword2 == "") &&
+      newPassword === newPassword2
+    ) {
+      setUser({ ...user, oldPassword, newPassword });
+    }
+  }, [oldPassword, newPassword, newPassword2]);
+
+  const submit = async () => {
+    if (oldPassword == "" || newPassword == "" || newPassword2 == "") {
+      console.log("Please fill all the fields.");
+    } else if (newPassword === newPassword2) {
+      const response = await updateAccount({
+        ...user,
+      });
+
+      if (user.email !== account.email || user.name !== account.name)
+        update({ email: user.email, name: user.name });
+
+      if (response) {
+        setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+        togglePasswordFormModal();
+      }
+    } else {
+      console.log("Passwords do not match.");
+    }
+  };
+
+  return (
+    <div className="mx-auto flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
+      <p className="text-sm text-sky-500">Old Password</p>
+
+      <input
+        value={oldPassword}
+        onChange={(e) => setOldPassword(e.target.value)}
+        type="password"
+        className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+      />
+      <p className="text-sm text-sky-500">New Password</p>
+
+      <input
+        value={newPassword}
+        onChange={(e) => setNewPassword1(e.target.value)}
+        type="password"
+        className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+      />
+      <p className="text-sm text-sky-500">Re-enter New Password</p>
+
+      <input
+        value={newPassword2}
+        onChange={(e) => setNewPassword2(e.target.value)}
+        type="password"
+        className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+      />
+
+      <SubmitButton
+        onClick={submit}
+        label="Apply Settings"
+        icon={faPenToSquare}
+        className="mx-auto mt-2"
+      />
+    </div>
+  );
+}

components/Modal/User/PrivacySettings.tsx

@@ -0,0 +1,102 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import Checkbox from "../../Checkbox";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { useSession } from "next-auth/react";
+import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
+import SubmitButton from "../../SubmitButton";
+
+type Props = {
+  toggleSettingsModal: Function;
+  setUser: Dispatch<SetStateAction<AccountSettings>>;
+  user: AccountSettings;
+};
+
+export default function PrivacySettings({
+  toggleSettingsModal,
+  setUser,
+  user,
+}: Props) {
+  const { update } = useSession();
+  const { account, updateAccount } = useAccountStore();
+
+  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
+    user.whitelistedUsers.join(", ")
+  );
+
+  useEffect(() => {
+    setUser({
+      ...user,
+      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
+    });
+  }, [whitelistedUsersTextbox]);
+
+  useEffect(() => {
+    setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+  }, []);
+
+  const stringToArray = (str: string) => {
+    const stringWithoutSpaces = str.replace(/\s+/g, "");
+
+    const wordsArray = stringWithoutSpaces.split(",");
+
+    return wordsArray;
+  };
+
+  const submit = async () => {
+    const response = await updateAccount({
+      ...user,
+    });
+
+    setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+
+    if (user.email !== account.email || user.name !== account.name)
+      update({ email: user.email, name: user.name });
+
+    if (response) toggleSettingsModal();
+  };
+
+  return (
+    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
+      <div>
+        <p className="text-sm text-sky-500 mb-2">Profile Visibility</p>
+
+        <Checkbox
+          label="Make profile private"
+          state={user.isPrivate}
+          className="text-sm sm:text-base"
+          onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
+        />
+
+        <p className="text-gray-500 text-sm">
+          This will limit who can find and add you to other Collections.
+        </p>
+
+        {user.isPrivate && (
+          <div>
+            <p className="text-sm text-sky-500 my-2">Whitelisted Users</p>
+            <p className="text-gray-500 text-sm mb-3">
+              Please provide the Email addresses of the users you wish to grant
+              visibility to your profile. Separated by comma.
+            </p>
+            <textarea
+              className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
+              placeholder="Your profile is hidden from everyone right now..."
+              value={whitelistedUsersTextbox}
+              onChange={(e) => {
+                setWhiteListedUsersTextbox(e.target.value);
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      <SubmitButton
+        onClick={submit}
+        label="Apply Settings"
+        icon={faPenToSquare}
+        className="mx-auto mt-2"
+      />
+    </div>
+  );
+}

components/Modal/User/ProfileSettings.tsx

@@ -1,57 +1,28 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUser, faClose } from "@fortawesome/free-solid-svg-icons";
-import Checkbox from "../Checkbox";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { useSession } from "next-auth/react";
 import { resizeImage } from "@/lib/client/resizeImage";
-import Modal from ".";
-import ChangePassword from "./ChangePassword";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "../SubmitButton";
-import ProfilePhoto from "../ProfilePhoto";
+import SubmitButton from "../../SubmitButton";
+import ProfilePhoto from "../../ProfilePhoto";
 
 type Props = {
   toggleSettingsModal: Function;
+  setUser: Dispatch<SetStateAction<AccountSettings>>;
+  user: AccountSettings;
 };
 
-export default function UserSettings({ toggleSettingsModal }: Props) {
+export default function ProfileSettings({
+  toggleSettingsModal,
+  setUser,
+  user,
+}: Props) {
   const { update } = useSession();
   const { account, updateAccount } = useAccountStore();
 
-  const [user, setUser] = useState<AccountSettings>({
-    ...account,
-  });
-
-  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
-    user.whitelistedUsers.join(", ")
-  );
-  const [passwordFormModal, setPasswordFormModal] = useState(false);
-
-  const togglePasswordFormModal = () => {
-    setPasswordFormModal(!passwordFormModal);
-  };
-
-  const setPasswordForm = (oldPassword?: string, newPassword?: string) => {
-    setUser({ ...user, oldPassword, newPassword });
-  };
-
-  useEffect(() => {
-    setUser({
-      ...user,
-      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
-    });
-  }, [whitelistedUsersTextbox]);
-
-  const stringToArray = (str: string) => {
-    const stringWithoutSpaces = str.replace(/\s+/g, "");
-
-    const wordsArray = stringWithoutSpaces.split(",");
-
-    return wordsArray;
-  };
-
   const handleImageUpload = async (e: any) => {
     const file: File = e.target.files[0];
 
@@ -79,12 +50,16 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
     }
   };
 
+  useEffect(() => {
+    setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+  }, []);
+
   const submit = async () => {
     const response = await updateAccount({
       ...user,
     });
 
-    setPasswordForm(undefined, undefined);
+    setUser({ ...user, oldPassword: undefined, newPassword: undefined });
 
     if (user.email !== account.email || user.name !== account.name)
       update({ email: user.email, name: user.name });
@@ -93,54 +68,10 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
   };
 
   return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center">Settings</p>
-
+    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
       <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
-        <div className="flex flex-col gap-3">
-          <div>
-            <p className="text-sm text-sky-500 mb-2">Display Name</p>
-            <input
-              type="text"
-              value={user.name}
-              onChange={(e) => setUser({ ...user, name: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-            />
-          </div>
-
-          <div>
-            <p className="text-sm text-sky-500 mb-2">Email</p>
-            <input
-              type="text"
-              value={user.email}
-              onChange={(e) => setUser({ ...user, email: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-            />
-          </div>
-
-          <div>
-            <p className="text-sm text-sky-500 mb-2">Password</p>
-
-            <div className="w-fit" onClick={togglePasswordFormModal}>
-              <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500">
-                Change Password
-              </div>
-            </div>
-
-            {user.newPassword && user.oldPassword ? (
-              <p className="text-gray-500 text-sm mt-2">
-                Password modified. Please click{" "}
-                <span className=" whitespace-nowrap">"Apply Settings"</span> to
-                apply the changes..
-              </p>
-            ) : null}
-          </div>
-        </div>
-
-        <div className="sm:row-span-2 sm:justify-self-center mb-3">
-          <p className="text-sm text-sky-500 mb-2 sm:text-center">
-            Profile Photo
-          </p>
+        <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
+          <p className="text-sm text-sky-500 mb-2 text-center">Profile Photo</p>
           <div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
             <ProfilePhoto
               src={user.profilePic}
@@ -179,6 +110,28 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
             </div>
           </div>
         </div>
+
+        <div className="flex flex-col gap-3">
+          <div>
+            <p className="text-sm text-sky-500 mb-2">Display Name</p>
+            <input
+              type="text"
+              value={user.name}
+              onChange={(e) => setUser({ ...user, name: e.target.value })}
+              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+            />
+          </div>
+
+          <div>
+            <p className="text-sm text-sky-500 mb-2">Email</p>
+            <input
+              type="text"
+              value={user.email}
+              onChange={(e) => setUser({ ...user, email: e.target.value })}
+              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+            />
+          </div>
+        </div>
       </div>
 
       {/* <hr /> TODO: Export functionality
@@ -190,56 +143,12 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
           Export Data
         </div>
       </div> */}
-
-      <hr />
-
-      <p className="text-sm text-sky-500 mb-2">Profile Visibility</p>
-
-      <Checkbox
-        label="Make profile private"
-        state={user.isPrivate}
-        className="text-sm sm:text-base"
-        onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
-      />
-
-      <p className="text-gray-500 text-sm">
-        This will limit who can find and add you to other Collections.
-      </p>
-
-      {user.isPrivate ? (
-        <div>
-          <p className="text-sm text-sky-500 mb-2">Whitelisted Users</p>
-          <p className="text-gray-500 text-sm mb-3">
-            Please provide the Email addresses of the users you wish to grant
-            visibility to your profile. Separated by comma.
-          </p>
-          <textarea
-            className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
-            placeholder="Your profile is hidden from everyone right now..."
-            value={whitelistedUsersTextbox}
-            onChange={(e) => {
-              setWhiteListedUsersTextbox(e.target.value);
-            }}
-          />
-        </div>
-      ) : null}
-
       <SubmitButton
         onClick={submit}
         label="Apply Settings"
         icon={faPenToSquare}
         className="mx-auto mt-2"
       />
-
-      {passwordFormModal ? (
-        <Modal toggleModal={togglePasswordFormModal}>
-          <ChangePassword
-            user={user}
-            togglePasswordFormModal={togglePasswordFormModal}
-            setPasswordForm={setPasswordForm}
-          />
-        </Modal>
-      ) : null}
     </div>
   );
 }

components/Modal/User/index.tsx

@@ -0,0 +1,88 @@
+import { Tab } from "@headlessui/react";
+import { AccountSettings } from "@/types/global";
+import { useState } from "react";
+import ChangePassword from "./ChangePassword";
+import ProfileSettings from "./ProfileSettings";
+import PrivacySettings from "./PrivacySettings";
+
+type Props = {
+  toggleSettingsModal: Function;
+  activeUser: AccountSettings;
+  className?: string;
+  defaultIndex?: number;
+};
+
+export default function UserModal({
+  className,
+  defaultIndex,
+  toggleSettingsModal,
+  activeUser,
+}: Props) {
+  const [user, setUser] = useState<AccountSettings>(activeUser);
+
+  return (
+    <div className={className}>
+      <Tab.Group defaultIndex={defaultIndex}>
+        <p className="text-xl text-sky-500 mb-5 text-center">
+          Account Settings
+        </p>
+        <Tab.List className="flex justify-center flex-col sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
+          <Tab
+            className={({ selected }) =>
+              selected
+                ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+            }
+          >
+            Profile Settings
+          </Tab>
+
+          <Tab
+            className={({ selected }) =>
+              selected
+                ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+            }
+          >
+            Privacy Settings
+          </Tab>
+
+          <Tab
+            className={({ selected }) =>
+              selected
+                ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+            }
+          >
+            Password
+          </Tab>
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>
+            <ProfileSettings
+              toggleSettingsModal={toggleSettingsModal}
+              setUser={setUser}
+              user={user}
+            />
+          </Tab.Panel>
+
+          <Tab.Panel>
+            <PrivacySettings
+              toggleSettingsModal={toggleSettingsModal}
+              setUser={setUser}
+              user={user}
+            />
+          </Tab.Panel>
+
+          <Tab.Panel>
+            <ChangePassword
+              togglePasswordFormModal={toggleSettingsModal}
+              setUser={setUser}
+              user={user}
+            />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+}

components/Modal/index.tsx

@@ -6,12 +6,16 @@ import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 type Props = {
   toggleModal: Function;
   children: ReactNode;
+  className?: string;
 };
 
-export default function ({ toggleModal, children }: Props) {
+export default function Modal({ toggleModal, className, children }: Props) {
   return (
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
-      <ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
+      <ClickAwayHandler
+        onClickOutside={toggleModal}
+        className={`w-fit m-auto h-[50rem] ${className}`}
+      >
         <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}