User Dropdown Menu

Build a user profile dropdown menu component that demonstrates flexible component composition patterns. The component should display a button with the current user's name and, when clicked, show a dropdown menu with several action options.

Requirements

The dropdown menu must support the following features:

1. Button display: Show a button with text "User: [name]" where [name] is the current user's name
2. Menu items: When opened, display a menu with three options:
   • "View Profile"
   • "Settings"
   • "Sign Out"
3. Item selection: Each menu item should log its action name to the console when clicked (e.g., "View Profile clicked")
4. Flexible composition: The component architecture should support adding or removing menu items easily without modifying parent component logic
5. Proper open/close behavior: The menu should close automatically after an item is selected

Component Interface

Create a UserDropdown component that accepts:

• userName (string): The name of the user to display

Export the component as the default export from src/UserDropdown.jsx.

Test Cases

• Given userName "Alice", the button displays "User: Alice" @test
• When the button is clicked, the menu opens and displays all three menu items @test
• When "Settings" menu item is clicked, it logs "Settings clicked" to console @test
• After selecting a menu item, the menu closes automatically @test

Implementation

@generates

API

/**
 * A user profile dropdown menu component that displays user actions.
 *
 * @param {Object} props - Component props
 * @param {string} props.userName - The name of the user to display in the button
 * @returns {JSX.Element} The rendered dropdown menu component
 */
export default function UserDropdown({ userName }) {
  // Implementation here
}

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible, unstyled UI components with flexible composition patterns.

@satisfied-by