tanstack.com/src/components/AuthenticatedUserMenu.tsx at github-app · TanStack/tanstack.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import * as React from 'react'
import { Link } from '@tanstack/react-router'
import {
  ChevronDown,
  Settings,
  Lock,
  LogOut,
  Sparkles,
  Key,
} from 'lucide-react'
import { Avatar } from '~/components/Avatar'
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
  DropdownSeparator,
} from '~/components/Dropdown'

interface AuthenticatedUserMenuProps {
  user: {
    image?: string | null
    oauthImage?: string | null
    name?: string | null
    email?: string | null
  } | null
  canAdmin: boolean
  canApiKeys: boolean
  onSignOut: () => void
}

export function AuthenticatedUserMenu({
  user,
  canAdmin,
  canApiKeys,
  onSignOut,
}: AuthenticatedUserMenuProps) {
  return (
    <Dropdown>
      <DropdownTrigger>
        <div className="flex items-center gap-1 cursor-pointer h-[26px]">
          <Avatar
            image={user?.image}
            oauthImage={user?.oauthImage}
            name={user?.name}
            email={user?.email}
            size="xs"
            className="w-[26px] h-[26px]"
          />
          <ChevronDown className="w-3 h-3 opacity-50" />
        </div>
      </DropdownTrigger>
      <DropdownContent align="end">
        <div className="px-2 py-1.5 text-xs text-gray-500 dark:text-gray-400">
          {user?.email}
        </div>
        <DropdownSeparator />
        <DropdownItem asChild>
          <Link to="/account" className="flex items-center gap-2">
            <Settings className="w-4 h-4" />
            <span>Account</span>
          </Link>
        </DropdownItem>
        <DropdownItem asChild>
          <Link to="/account/submissions" className="flex items-center gap-2">
            <Sparkles className="w-4 h-4" />
            <span>My Showcases</span>
          </Link>
        </DropdownItem>
        {canApiKeys && (
          <DropdownItem asChild>
            <Link
              to="/account/integrations"
              className="flex items-center gap-2"
            >
              <Key className="w-4 h-4" />
              <span>Integrations</span>
            </Link>
          </DropdownItem>
        )}
        {canAdmin && (
          <DropdownItem asChild>
            <Link to="/admin" className="flex items-center gap-2">
              <Lock className="w-4 h-4" />
              <span>Admin</span>
            </Link>
          </DropdownItem>
        )}
        <DropdownSeparator />
        <DropdownItem onSelect={onSignOut}>
          <LogOut className="w-4 h-4" />
          <span>Sign out</span>
        </DropdownItem>
      </DropdownContent>
    </Dropdown>
  )
}