feat: implement profile settings feature

components/atoms/Avatar/avatar.tsx

@@ -28,7 +28,7 @@ const Avatar = (props: AvatarProps): JSX.Element => {
   case "string":
     return <DefaultAvatar {...props} avatarURL={imageSource} />;
   case "number":
-    return <CustomAvatar {...props} />;
+    return <CustomAvatar {...props} avatarURL={imageSource} />;
 
   default:
     return <span>invalid avatar size props!!!</span>;

components/atoms/TextInput/text-input.tsx

@@ -45,7 +45,7 @@ const TextInput = ({
             "flex-1 px-3 text-light-slate-12 bg-white shadow-input border transition rounded-lg py-1 flex items-center",
             borderless && "!border-none",
             state === "invalid" ? " focus-within:border-light-red-10 " : "focus-within:border-light-orange-9 ",
-            disabled && "bg-light-slate-3",
+            disabled && "bg-light-slate-3 text-light-slate-6",
             classNames
           )}
         >
@@ -57,18 +57,22 @@ const TextInput = ({
             placeholder={placeholder || ""}
             onChange={onChange}
             value={value}
-            className={`flex-1 focus:outline-none  ${classNames}`}
+            className={`flex-1 focus:outline-none  ${classNames} ${disabled && "bg-light-slate-3 text-light-slate-9"}`}
             autoFocus={autoFocus}
             disabled={disabled}
           />
-          {state === "valid" ? (
-            <CheckCircleFillIcon className="text-light-orange-9" size={14} />
-          ) : !!value ? (
-            <span className="flex items-center" onClick={() => handleResetInput()}>
-              <XCircleFillIcon className="text-light-red-11" size={14} />
-            </span>
-          ) : (
-            ""
+          {!disabled && (
+            <>
+              {state === "valid" ? (
+                <CheckCircleFillIcon className="text-light-orange-9" size={14} />
+              ) : !!value ? (
+                <span className="flex items-center" onClick={() => handleResetInput()}>
+                  <XCircleFillIcon className="text-light-red-11" size={14} />
+                </span>
+              ) : (
+                ""
+              )}
+            </>
           )}
         </div>
       </label>

components/molecules/AuthSection/auth-section.tsx

@@ -9,17 +9,41 @@ import DropdownList from "../DropdownList/dropdown-list";
 import Text from "components/atoms/Typography/text";
 import { Divider } from "@supabase/ui";
 import useSupabaseAuth from "../../../lib/hooks/useSupabaseAuth";
-import { FiLogOut } from "react-icons/fi";
+import { FiLogOut, FiSettings } from "react-icons/fi";
 import GitHubIcon from "img/icons/github-icon.svg";
 import Icon from "components/atoms/Icon/icon";
 import useSession from "lib/hooks/useSession";
+import Link from "next/link";
 
 const AuthSection: React.FC = ({}) => {
   const { signIn, signOut, user } = useSupabaseAuth();
   const { onboarded } = useSession();
 
   const authMenu = {
     authed: [
+      <Link
+        href={`/user/${user?.user_metadata.user_name}`}
+        key="settings"
+        className="group flex gap-x-3 text-lg hover:bg-light-orange-3 items-center px-4 py-2 rounded-md cursor-pointer transition"
+      >
+        <Avatar
+          alt="User Avatar"
+          avatarURL={user ? user.user_metadata.avatar_url : userAvatar}
+          size={18}
+          hasBorder={true}
+          isCached={false}
+          isCircle
+        />
+        <Text className="group-hover:text-light-orange-10">{user?.user_metadata.user_name}</Text>
+      </Link>,
+      <Link
+        href="/user/settings"
+        key="settings"
+        className="group flex gap-x-3 text-lg hover:bg-light-orange-3 items-center px-4 py-2 rounded-md cursor-pointer transition"
+      >
+        <FiSettings className="group-hover:text-light-orange-10" />
+        <Text className="group-hover:text-light-orange-10">Settings</Text>
+      </Link>,
       <span
         onClick={async () => await signOut()}
         key="authorized"