userbutton ui

frontend/components/ui/userButton.tsx

@@ -29,13 +29,19 @@ export default function UserButton({ userData }: { userData: User }) {
             .map((name) => name[0].toUpperCase())}
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent className="w-40" align="end">
+        <div className="py-1.5 px-2 w-full">
+          <div className="font-medium">{userData.name}</div>
+          <div className="text-sm w-full overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
+            {userData.email}
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
         <DropdownMenuItem className="cursor-pointer">
           <Pencil className="mr-2 h-4 w-4" />
           <span>Edit Profile</span>
-          {/* open modal with name and email (disabled) */}
         </DropdownMenuItem>
-        <DropdownMenuSeparator />
         <DropdownMenuItem
           onClick={() => signOut(() => router.push("/"))}
           className="!text-destructive cursor-pointer"