added settings modal UI

components/Modal/UserSettings.tsx

@@ -5,49 +5,142 @@
 
 import { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { NewLink } from "@/types/global";
-import useLinkStore from "@/store/links";
-import RequiredBadge from "../RequiredBadge";
+import { faCircleUser, faClose } from "@fortawesome/free-solid-svg-icons";
+import Checkbox from "../Checkbox";
+import useAccountStore from "@/store/account";
 
 type Props = {
   toggleSettingsModal: Function;
 };
 
 export default function UserSettings({ toggleSettingsModal }: Props) {
-  const [newLink, setNewLink] = useState<NewLink>();
+  const { account } = useAccountStore();
+  const [collectionProtection, setCollectionProtection] = useState(false);
 
-  const { addLink } = useLinkStore();
+  const [name, setName] = useState(account.name);
+  const [email, setEmail] = useState(account.email);
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  const handleFileChange = async (e) => {
+    const file = e.target.files[0];
+    setSelectedFile(file);
+  };
 
   const submit = async () => {
-    console.log(newLink);
-
-    const response = await addLink(newLink as NewLink);
-
-    if (response) toggleSettingsModal();
+    // const response = await addLink(newLink as NewLink);
+    // if (response) toggleSettingsModal();
   };
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="font-bold text-sky-300 mb-2 text-center">Settings</p>
+      <p className="text-xl text-sky-500 mb-2 text-center">Settings</p>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          Name
-          <RequiredBadge />
-        </p>
-        <input
-          type="text"
-          placeholder="e.g. Example Link"
-          className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
+      <p className="text-sky-600">Profile Settings</p>
+
+      <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
+        <div className="flex flex-col gap-3">
+          <div>
+            <p className="text-sm font-bold text-sky-300 mb-2">Display Name</p>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(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 font-bold text-sky-300 mb-2">Email</p>
+            <input
+              type="text"
+              value={email}
+              onChange={(e) => setEmail(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 font-bold text-sky-300 mb-2">Password</p>
+
+            <div className="w-fit">
+              <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>
+          </div>
+        </div>
+
+        <div className="sm:row-span-2 sm:justify-self-center mb-3">
+          <p className="text-sm font-bold text-sky-300 mb-2 sm:text-center">
+            Profile Photo
+          </p>
+          <div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
+            {/* Image goes here */}
+            <FontAwesomeIcon
+              icon={faCircleUser}
+              className="w-28 h-28 text-sky-500"
+            />
+            <div className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 bg-white border-sky-100 rounded-full text-gray-500 hover:text-red-500 duration-100 cursor-pointer">
+              <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
+            </div>
+            <div className="absolute -bottom-2 left-0 right-0 mx-auto w-fit text-center">
+              <label
+                htmlFor="upload-photo"
+                title="PNG or JPG (Max: 3MB)"
+                className="border border-sky-100 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500"
+              >
+                Browse...
+                <input
+                  type="file"
+                  name="photo"
+                  id="upload-photo"
+                  accept="image/png, image/jpeg"
+                  className="hidden"
+                  onChange={handleFileChange}
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr />
+
+      <p className="text-sky-600">Data Settings</p>
+
+      <div className="w-fit">
+        <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">
+          Export Data
+        </div>
+      </div>
+
+      <hr />
+
+      <p className="text-sky-600">Privacy Settings</p>
+
+      <Checkbox
+        label="Control who can add you to other Collections"
+        state={collectionProtection}
+        className="text-sm sm:text-base"
+        onClick={() => setCollectionProtection(!collectionProtection)}
+      />
+
+      <div className="w-fit">
+        <div
+          className={`border rounded-md duration-100 bg-white px-2 py-1 text-center select-none ${
+            collectionProtection
+              ? "text-sky-900 border-sky-100 cursor-pointer hover:border-sky-500"
+              : "text-gray-400 border-gray-100"
+          }`}
+        >
+          Manage Allowed Users
+        </div>
       </div>
 
       <div
         className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
         // onClick={submit}
       >
-        <FontAwesomeIcon icon={faPlus} className="h-5" />
         Apply Settings
       </div>
     </div>