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

2023-06-10 02:01:14 +03:30
parent dcdef77387
commit 2df4aad077
64 changed files with 713 additions and 373 deletions
@@ -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>
+  );
+}