Create UserDropdownMenu.tsx

[eanorambuena]

This pull request introduces a new UserDropdownMenu component in the components/UserDropdownMenu.tsx file. The component provides a dropdown menu for authenticated users, displaying account-related options such as viewing their profile, accessing their events, and logging out.

New UserDropdownMenu Component:

• Authentication Integration: Utilizes the useAuth0 hook to fetch user authentication status and data (user, isAuthenticated, isLoading).
• Dropdown Menu Implementation: Implements a dropdown menu using DropdownMenu components, with options for "Mi Perfil," "Mis Eventos," and a logout button.
• Conditional Rendering: Ensures the dropdown menu is displayed only when the user is authenticated and user data is available.
• Styling Enhancements: Applies custom styles for the dropdown menu and its items, including hover effects and rounded user profile image.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
idsapp	⬜️ Ignored (Inspect)	Visit Preview		Jun 23, 2025 5:37pm

[Copilot]

Pull Request Overview

This PR introduces a new UserDropdownMenu component that displays a user’s avatar and account-related options in a dropdown menu when authenticated.

• Adds a UserDropdownMenu component with profile and logout options
• Applies custom styles for trigger and menu items
• Relies on a user prop for rendering user data

Comments suppressed due to low confidence (2)

components/UserDropdownMenu.tsx:16

• The component signature expects a user prop but the description references useAuth0. Align the documentation or implement the hook internally.

export function UserDropdownMenu({ user }: UserDropdownMenuProps) {

components/UserDropdownMenu.tsx:1

• This new component currently has no associated tests. Consider adding unit or integration tests to cover rendering and menu interactions.

import {

[Copilot]

[nitpick] The size-10 utility is not a standard Tailwind class. Use explicit h-10 w-10 (or your design system’s equivalent) for consistent sizing.

Suggested change

	<img src={user.picture} alt={user.name} className="size-10 rounded-full border-[#265F1A]" />
	<img src={user.picture} alt={user.name} className="h-10 w-10 rounded-full border-[#265F1A]" />

[Copilot]

The PR description mentions a "Mis Eventos" option, but it’s missing here. Add a <DropdownMenuItem> linking to the events route.

Suggested change

	<DropdownMenuItem><Link to="/perfil">Mi Perfil</Link></DropdownMenuItem>
	<DropdownMenuItem><Link to="/perfil">Mi Perfil</Link></DropdownMenuItem>
	<DropdownMenuItem><Link to="/eventos">Mis Eventos</Link></DropdownMenuItem>