feat: add name and avatarUrl fields to GitHubUserData and UserResult types

Author: lazzyms

app/api/compare/route.ts

@@ -23,6 +23,8 @@ export async function GET(request: Request) {
 
         return {
           username,
+          name: data.name,
+          avatarUrl: data.avatarUrl,
           repoScore: Math.round(score.repoScore),
           prScore: Math.round(score.prScore),
           contributionScore: Math.round(score.contributionScore),

components/comparison-table.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { UserResult } from "@/types/user-result";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
@@ -24,9 +25,18 @@ export function ComparisonTable({ user1, user2 }: ComparisonTableProps) {
     <div className="grid md:grid-cols-2 gap-6">
       {[user1, user2].map((user, idx) => (
         <Card key={user.username} className="overflow-hidden transition-all hover:shadow-lg">
-          <CardHeader className={user.isWinner ? "border-b-2 border-primary/30" : "border-b-2 border-muted"}>
+          <CardHeader className={`pb-4 ${user.isWinner ? "border-b-2 border-primary/30" : "border-b-2 border-muted"}`}>
             <CardTitle className="flex items-center justify-between">
-              <span>{user.username}</span>
+              <div className="flex items-center gap-3">
+                <Image
+                  src={user.avatarUrl}
+                  alt={user.username}
+                  width={40}
+                  height={40}
+                  className="rounded-full ring-2 ring-border"
+                />
+                <span>{user.name || user.username}</span>
+              </div>
               {user.isWinner && (
                 <span className="text-xs bg-primary/20 text-primary px-2 py-1 rounded-full">Winner</span>
               )}

lib/github.ts

@@ -15,6 +15,8 @@ const client = graphql.defaults({
 const QUERY = /* GraphQL */ `
   query FetchUserData($login: String!, $repoCount: Int = 100, $prCount: Int = 100) {
     user(login: $login) {
+      name
+      avatarUrl
       repositories(
         first: $repoCount
         privacy: PUBLIC
@@ -67,6 +69,8 @@ export async function fetchGitHubUserData(
   }
 
   return {
+    name: user.name as string | null,
+    avatarUrl: user.avatarUrl as string,
     repos: user.repositories.nodes as RepoNode[],
     pullRequests: user.pullRequests.nodes as PullRequestNode[],
     contributions: user.contributionsCollection as ContributionTotals,

next.config.js

@@ -2,6 +2,14 @@
 const nextConfig = {
   reactStrictMode: true,
   typedRoutes: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;