updating frontend code

frontend/src/components/UserDropdown.jsx

@@ -1,19 +1,19 @@
-import { useState, useRef, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { User, Settings, ShoppingBag, DollarSign, LogOut } from 'lucide-react';
+import { useState, useRef, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { User, Settings, ShoppingBag, DollarSign, LogOut } from "lucide-react";
 
 const UserDropdown = ({ onLogout, userName }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const navigate = useNavigate();
-  
+
   // Use passed userName or fallback to default
-  const displayName = userName || 'User';
-  
+  const displayName = userName || "User";
+
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
-  
+
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -21,27 +21,27 @@ const UserDropdown = ({ onLogout, userName }) => {
         setIsOpen(false);
       }
     };
-    
-    document.addEventListener('mousedown', handleClickOutside);
+
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  
+
   const handleLogout = () => {
     // Close the dropdown
     setIsOpen(false);
-    
+
     // Call the onLogout function from props
     if (onLogout) {
       onLogout();
       console.log("Logout successful");
     }
-    
+
     // Navigate to login page (this may be redundant as App.jsx should handle redirection)
-    navigate('/login');
+    navigate("/login");
   };
-  
+
   return (
     <div className="relative" ref={dropdownRef}>
       <button
@@ -52,14 +52,14 @@ const UserDropdown = ({ onLogout, userName }) => {
           <User className="h-5 w-5 text-green-600" />
         </div>
       </button>
-      
+
       {isOpen && (
         <div className="absolute right-0 mt-2 w-48 bg-white border border-gray-200 shadow-md z-10">
           {/* User Info */}
           <div className="px-4 py-3 border-b border-gray-100">
             <p className="text-sm font-medium text-gray-900">{displayName}</p>
           </div>
-          
+
           {/* Navigation Links */}
           <div className="py-1">
             <Link
@@ -70,7 +70,7 @@ const UserDropdown = ({ onLogout, userName }) => {
               <ShoppingBag className="h-4 w-4 mr-2 text-gray-500" />
               My Listings
             </Link>
-            
+
             <Link
               to="/transactions"
               className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
@@ -79,7 +79,7 @@ const UserDropdown = ({ onLogout, userName }) => {
               <DollarSign className="h-4 w-4 mr-2 text-gray-500" />
               Transactions
             </Link>
-            
+
             <Link
               to="/settings"
               className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
@@ -88,7 +88,7 @@ const UserDropdown = ({ onLogout, userName }) => {
               <Settings className="h-4 w-4 mr-2 text-gray-500" />
               Settings
             </Link>
-            
+
             <button
               className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
               onClick={handleLogout}
@@ -103,4 +103,4 @@ const UserDropdown = ({ onLogout, userName }) => {
   );
 };
 
-export default UserDropdown;
+export default UserDropdown;