"use client" import * as React from "react" import Link from "next/link" import { LogOut, Settings, User, CreditCard } from "lucide-react" import { cn } from "@/lib/utils" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { UserAvatar } from "@/components/shared/user-avatar" /** A menu item rendered inside the user dropdown. */ export interface UserDropdownItem { /** Display label. */ label: string /** Route path or callback. */ href?: string /** Click handler — takes precedence over `href` navigation. */ onClick?: () => void /** Lucide icon element. */ icon?: React.ReactNode /** Render with destructive styling. */ destructive?: boolean } export interface UserDropdownProps { /** User display name — shown in the dropdown header and avatar fallback. */ name: string /** User email — shown below the name in the dropdown header. */ email: string /** Avatar image URL. Falls back to initials when absent. */ imageUrl?: string /** * Menu items rendered in the main group. * Defaults to Account, Billing, and Settings links when omitted. */ items?: UserDropdownItem[] /** Label and handler for the sign-out action at the bottom. */ onSignOut?: () => void className?: string } const defaultItems: UserDropdownItem[] = [ { label: "Account", href: "/settings/account", icon: }, { label: "Billing", href: "/settings/billing", icon: , }, { label: "Settings", href: "/settings", icon: , }, ] /** * Avatar-triggered dropdown menu showing user identity and quick-access links. * Composes the `DropdownMenu` and `UserAvatar` primitives. * * @example * ```tsx * signOut()} * /> * ``` */ export function UserDropdown({ name, email, imageUrl, items = defaultItems, onSignOut, className, }: UserDropdownProps) { return (

{name}

{email}

{items.map((item) => ( {item.href && !item.onClick ? ( {item.icon} {item.label} ) : ( <> {item.icon} {item.label} )} ))} {onSignOut && ( <> Sign out )} ) }

Prop	Type	Required	Description
`name`	`string`	yes	User display name.
`email`	`string`	yes	User email address.
`onSignOut`	`() => void`	yes	Sign-out handler.
`items`	`UserDropdownItem[]`	—	Additional menu items.