pass data properly to userbutton

frontend/components/dashboard/navbar/index.tsx

@@ -1,12 +1,11 @@
-import { UserButton } from "@clerk/nextjs"
-import { dark } from "@clerk/themes"
 import Image from "next/image"
 import Link from "next/link"
 import Logo from "@/assets/logo.svg"
 import DashboardNavbarSearch from "./search"
 import DashboardUserButton from "./userButton"
+import { User } from "@/lib/types"
 
-export default function DashboardNavbar({ userId }: { userId: string }) {
+export default function DashboardNavbar({ userData }: { userData: User }) {
   return (
     <div className="h-16 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-4">
@@ -20,7 +19,7 @@ export default function DashboardNavbar({ userId }: { userId: string }) {
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />
-        <DashboardUserButton userId={userId} />
+        <DashboardUserButton userData={userData} />
       </div>
     </div>
   )

frontend/components/dashboard/navbar/userButton.tsx

@@ -8,18 +8,25 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { User } from "@/lib/types"
 import { LogOut, Pencil } from "lucide-react"
 
-export default function DashboardUserButton({ userId }: { userId: string }) {
+export default function DashboardUserButton({ userData }: { userData: User }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <div className="w-9 h-9 rounded-full overflow-hidden bg-red-500"></div>
+        <div className="w-9 h-9 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-sm font-medium">
+          {userData.name
+            .split(" ")
+            .slice(0, 2)
+            .map((name) => name[0].toUpperCase())}
+        </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <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 className="!text-destructive cursor-pointer">