feat: user avatar images

- added user avatars for each user
- it will fetch user images from github or google and if there is no image then it will show initials

frontend/components/ui/avatar.tsx

@@ -1,23 +1,42 @@
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 export default function Avatar({
   name,
+  avatarUrl,
   className,
 }: {
   name: string
+  avatarUrl?: string | null
   className?: string
 }) {
+  // Generate initials from name if no avatarUrl is provided
+  const initials = name
+    ? name
+        .split(" ")
+        .slice(0, 2)
+        .map((letter) => letter[0].toUpperCase())
+        .join("")
+    : "?"
+
   return (
     <div
       className={cn(
         className,
-        "w-5 h-5 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-[0.5rem] font-medium"
+        "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"
       )}
     >
-      {name
-        .split(" ")
-        .slice(0, 2)
-        .map((letter) => letter[0].toUpperCase())}
+      {avatarUrl ? (
+        <Image
+          src={avatarUrl}
+          alt={name || "User"}
+          width={20}
+          height={20}
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        initials
+      )}
     </div>
   )
 }

frontend/components/ui/userButton.tsx

@@ -11,6 +11,7 @@ import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
 import { LogOut, Sparkles } from "lucide-react"
 import { useRouter } from "next/navigation"
+import Avatar from "./avatar"
 
 export default function UserButton({ userData }: { userData: User }) {
   if (!userData) return null
@@ -21,13 +22,7 @@ export default function UserButton({ userData }: { userData: User }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <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 &&
-            userData.name
-              .split(" ")
-              .slice(0, 2)
-              .map((name) => name[0].toUpperCase())}
-        </div>
+        <Avatar name={userData.name} avatarUrl={userData.avatarUrl} />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-48" align="end">
         <div className="py-1.5 px-2 w-full">