added hover and navigate

nepalingo-web/src/components/UserAvatar.tsx

@@ -1,17 +1,38 @@
-import React from "react";
+import React, { HTMLAttributes } from "react";
 import { useAuth } from "@/hooks/Auth";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPen } from "@fortawesome/free-solid-svg-icons";
 
-const UserAvatar: React.FC = () => {
+interface UserAvatarProps extends HTMLAttributes<HTMLDivElement> {
+  showPenOnHover?: boolean;
+}
+
+const UserAvatar: React.FC<UserAvatarProps> = ({
+  onClick,
+  showPenOnHover = false,
+  ...props
+}) => {
   const { user } = useAuth();
   const username = user?.user_metadata?.username;
   const avatarUrl = `https://robohash.org/${username}.png?set=set4`;
 
   return (
-    <img
-      src={avatarUrl}
-      alt="User Avatar"
-      className="w-full h-full rounded-full"
-    />
+    <div
+      className={`relative w-full h-full ${showPenOnHover ? "group cursor-pointer" : ""}`}
+      onClick={onClick}
+      {...props}
+    >
+      <img
+        src={avatarUrl}
+        alt="User Avatar"
+        className="w-full h-full rounded-full"
+      />
+      {showPenOnHover && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+          <FontAwesomeIcon icon={faPen} className="text-white" />
+        </div>
+      )}
+    </div>
   );
 };
 

nepalingo-web/src/components/header/UserProfile.tsx

@@ -4,13 +4,15 @@ import { StreakContext } from "@/hooks/StreakContext";
 import { getPhrase } from "@/components/header/StreakPhrase";
 import { useAuth } from "@/hooks/Auth";
 import fire from "@/assets/fire.svg";
+import { useNavigate } from "react-router-dom";
 
 const UserProfile: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { user, signOut } = useAuth();
   const { currentStreak, longestStreak } = useContext(StreakContext);
   const phrase = getPhrase(currentStreak);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
@@ -25,6 +27,10 @@ const UserProfile: React.FC = () => {
     }
   };
 
+  const handleAvatarClick = () => {
+    navigate("/edit-profile");
+  };
+
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
@@ -47,7 +53,7 @@ const UserProfile: React.FC = () => {
         <div className="absolute right-0 z-10 mt-2 w-64 rounded-lg shadow-lg bg-[#2B2B2B] p-4">
           <div className="flex flex-col items-center">
             <div className="w-16 h-16">
-              <UserAvatar />
+              <UserAvatar onClick={handleAvatarClick} showPenOnHover />
             </div>
             <span className="mt-1 text-white font-primary font-black">
               {user?.user_metadata?.username}