Base UI design, May contain bugs

2025-03-05 22:30:52 -07:00
parent 4bedeed33c
commit 49929a85da
28 changed files with 2208 additions and 367 deletions
--- a/frontend/src/components/UserDropdown.jsx
+++ b/frontend/src/components/UserDropdown.jsx
@@ -0,0 +1,106 @@
+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 toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+  
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      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');
+  };
+  
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        className="flex items-center focus:outline-none"
+        onClick={toggleDropdown}
+      >
+        <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
+          <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
+              to="/selling"
+              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+              onClick={() => setIsOpen(false)}
+            >
+              <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"
+              onClick={() => setIsOpen(false)}
+            >
+              <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"
+              onClick={() => setIsOpen(false)}
+            >
+              <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}
+            >
+              <LogOut className="h-4 w-4 mr-2 text-gray-500" />
+              Log out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserDropdown;