User Menu

1import * as React from 'react';
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuSeparator,
7  DropdownMenuSub,
8  DropdownMenuSubContent,
9  DropdownMenuSubTrigger,
10  DropdownMenuTrigger,
11} from '@/components/ui/dropdown-menu';
12import {
13  User,
14  Wallet,
15  DollarSign,
16  LogOut,
17  PlusCircle,
18  Users,
19} from 'lucide-react';
20import { UserInfo } from './user-info';
21import { ProfilePicture } from './profile-picture';
22import { cn } from '@/lib/utils/deso';
23import { Profile } from '@/lib/schemas/deso';
24import { UserPublicKey } from './user-public-key';
25import { UsernameDisplay } from './username-display';
26 
27export interface UserMenuAccount {
28  publicKey: string;
29  profile?: Profile;
30}
31 
32interface UserMenuProps {
33  currentUser: UserMenuAccount;
34  otherAccounts?: UserMenuAccount[];
35  onAccountSwitch?: (publicKey: string) => void;
36  onLogout?: () => void;
37  onAddAccount?: () => void;
38  onMyProfile?: () => void;
39  onMyWallet?: () => void;
40  onMyEarnings?: () => void;
41  variant?: 'full' | 'compact';
42  align?: 'center' | 'start' | 'end';
43  triggerClassName?: string;
44}
45 
46export function UserMenu({
47  currentUser,
48  otherAccounts = [],
49  onAccountSwitch,
50  onLogout,
51  onAddAccount,
52  onMyProfile,
53  onMyWallet,
54  onMyEarnings,
55  variant = 'full',
56  align = 'end',
57  triggerClassName,
58}: UserMenuProps) {
59  const trigger =
60    variant === 'full' ? (
61      <UserInfo
62        publicKey={currentUser.publicKey}
63        profile={currentUser.profile}
64        pictureSize="sm"
65        className={cn(
66          'cursor-pointer hover:bg-accent p-2 rounded-lg -m-2 w-full w-fit',
67          triggerClassName
68        )}
69      />
70    ) : (
71      <ProfilePicture
72        publicKey={currentUser.publicKey}
73        profile={currentUser.profile}
74        size="md"
75        className={cn('cursor-pointer', triggerClassName)}
76      />
77    );
78 
79  return (
80    <DropdownMenu>
81      <DropdownMenuTrigger asChild>
82        <div className="flex items-center">{trigger}</div>
83      </DropdownMenuTrigger>
84      <DropdownMenuContent className="w-64 border border-border" align={align}>
85        <div className="p-2 space-y-1">
86          <p className="text-xs text-muted-foreground px-2">Logged in as:</p>
87          <div className="px-2">
88            <UsernameDisplay
89              publicKey={currentUser.publicKey}
90              profile={currentUser.profile}
91              className="font-semibold"
92            />
93            <UserPublicKey
94              publicKey={currentUser.publicKey}
95// … truncated