@authdog/react-elements 0.0.36 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -29,6 +29,7 @@ export interface UserDropdownProps {
29
29
  side?: "top" | "right" | "bottom" | "left"
30
30
  align?: "start" | "center" | "end"
31
31
  sideOffset?: number
32
+ modal?: boolean
32
33
  }
33
34
 
34
35
  const getInitials = (name?: string) => {
@@ -38,7 +39,7 @@ const getInitials = (name?: string) => {
38
39
  return initials || "?"
39
40
  }
40
41
 
41
- export const UserDropdown = ({ trigger, user, className, onManageAccount, onSignout, links = [], side = "bottom", align = "end", sideOffset = 8 }: UserDropdownProps) => {
42
+ export const UserDropdown = ({ trigger, user, className, onManageAccount, onSignout, links = [], side = "bottom", align = "end", sideOffset = 8, modal = false }: UserDropdownProps) => {
42
43
  const primaryEmail = user?.emails?.[0]?.value || user?.email || ""
43
44
  const displayName = user?.displayName || user?.name || ""
44
45
  const avatar = user?.photos?.[0]?.value || user?.avatar || ""
@@ -57,8 +58,8 @@ export const UserDropdown = ({ trigger, user, className, onManageAccount, onSign
57
58
  const IconExternal = ExternalLink as any
58
59
 
59
60
  return (
60
- <DropdownMenu>
61
- <DropdownMenuTrigger className="inline-flex items-center justify-center h-10 w-10 rounded-full focus:outline-none">
61
+ <DropdownMenu modal={modal}>
62
+ <DropdownMenuTrigger asChild>
62
63
  {trigger}
63
64
  </DropdownMenuTrigger>
64
65
  <DropdownMenuContent align={align} side={side} sideOffset={sideOffset} className={cn("w-72 p-2 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", className)}>
@@ -87,8 +88,8 @@ export const UserDropdown = ({ trigger, user, className, onManageAccount, onSign
87
88
  )
88
89
  })}
89
90
  <DropdownMenuSeparator />
90
- <DropdownMenuItem className="cursor-pointer py-2 rounded-md font-semibold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 hover:text-red-700 dark:hover:text-red-300 focus:bg-red-50 dark:focus:bg-red-950/40 focus:text-red-700 dark:focus:text-red-300" onClick={() => onSignout?.()}>
91
- <LogOut className="mr-2 h-4 w-4 text-red-600 dark:text-red-400" />
91
+ <DropdownMenuItem className="cursor-pointer py-2 rounded-md font-semibold text-red-600 dark:text-red-300 hover:bg-red-50 hover:text-red-700 focus:bg-red-50 focus:text-red-700 dark:hover:bg-red-500/20 dark:focus:bg-red-500/25 dark:hover:text-red-100 dark:focus:text-red-100 border border-transparent dark:border-red-500/30 ring-0 focus-visible:ring-2 focus-visible:ring-red-400/40 dark:focus-visible:ring-red-400/40" onClick={() => onSignout?.()}>
92
+ <LogOut className="mr-2 h-4 w-4 text-red-600 dark:text-red-300" />
92
93
  <span>Sign out</span>
93
94
  </DropdownMenuItem>
94
95
  </DropdownMenuContent>
@@ -89,7 +89,7 @@ export const UserProfile = ({
89
89
  {renderIcon(User)}
90
90
  Profile
91
91
  </button>
92
- <button
92
+ {/* <button
93
93
  onClick={() => setActiveTab("security")}
94
94
  className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
95
95
  activeTab === "security"
@@ -110,7 +110,7 @@ export const UserProfile = ({
110
110
  >
111
111
  {renderIcon(SlidersHorizontal)}
112
112
  Preferences
113
- </button>
113
+ </button> */}
114
114
  </nav>
115
115
  </div>
116
116