From 38abf92ddd54b30578cd4d424f23247874656a9b Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Tue, 28 Jul 2026 00:29:13 +0300
Subject: [PATCH] refactor: add reusable Avatar component and integrate it into
 leaderboard and result dashboard (#181)

---
 components/avatar.tsx            | 33 ++++++++++++++++++++++++++++++++
 components/leaderboard-table.tsx |  8 +++-----
 components/result-dashboard.tsx  | 20 +++++++------------
 next.config.js                   |  1 +
 4 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 components/avatar.tsx

diff --git a/components/avatar.tsx b/components/avatar.tsx
new file mode 100644
index 0000000..95ade3b
--- /dev/null
+++ b/components/avatar.tsx
@@ -0,0 +1,33 @@
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+type AvatarProps = {
+  src: string;
+  alt: string;
+  size?: number;
+  unoptimized?: boolean;
+  className?: string;
+};
+
+/**
+ * Reusable avatar image component.
+ *
+ */
+export function Avatar({
+  src,
+  alt,
+  size = 32,
+  unoptimized = true,
+  className,
+}: AvatarProps) {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={size}
+      height={size}
+      unoptimized={unoptimized}
+      className={cn("rounded-full ring-1 ring-border", className)}
+    />
+  );
+}
diff --git a/components/leaderboard-table.tsx b/components/leaderboard-table.tsx
index f7872db..14ccbd2 100644
--- a/components/leaderboard-table.tsx
+++ b/components/leaderboard-table.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import Image from "next/image";
 import { Search, AlertTriangle } from "lucide-react";
+import { Avatar } from "./avatar";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import {
   Card,
@@ -154,12 +154,10 @@ export function LeaderboardTable({
                     </td>
                     <td className="px-3 py-3">
                       <div className="flex items-center gap-2">
-                        <Image
+                        <Avatar
                           src={user.avatarUrl}
                           alt={user.name || user.username}
-                          width={32}
-                          height={32}
-                          className="rounded-full ring-1 ring-border"
+                          size={32}
                         />
                         <div className="min-w-0">
                           <a
diff --git a/components/result-dashboard.tsx b/components/result-dashboard.tsx
index 8d8c542..937ff26 100644
--- a/components/result-dashboard.tsx
+++ b/components/result-dashboard.tsx
@@ -2,8 +2,8 @@
 
 import { useMemo, useState } from "react";
 import { Check, Copy, Trophy } from "lucide-react";
-import Image from "next/image";
 import { useSearchParams } from "next/navigation";
+import { Avatar } from "@/components/avatar";
 import { ComparisonChart } from "./comparison-chart";
 import { TopList } from "./top-list";
 import { InsightsList } from "./insights-list";
@@ -139,12 +139,10 @@ export function ResultDashboard({
         <CardHeader className="pb-3">
           <CardTitle className="flex items-center justify-between text-base">
             <div className="flex items-center gap-2">
-              <Image
+              <Avatar
                 src={user.avatarUrl}
                 alt={t("comparison.avatarAlt", { name: title })}
-                width={28}
-                height={28}
-                className="rounded-full ring-1 ring-border"
+                size={28}
               />
               <a
                 href={getGithubProfileUrl(user.username)}
@@ -263,12 +261,10 @@ export function ResultDashboard({
       <Card key={`signal-${user.username}`}>
         <CardHeader className="pb-3">
           <CardTitle className="flex items-center gap-2 text-base">
-            <Image
+            <Avatar
               src={user.avatarUrl}
               alt={t("comparison.avatarAlt", { name: getDisplayName(user) })}
-              width={24}
-              height={24}
-              className="rounded-full ring-1 ring-border"
+              size={24}
             />
             <a
               href={getGithubProfileUrl(user.username)}
@@ -356,12 +352,10 @@ export function ResultDashboard({
               return (
                 <div className="flex items-center gap-2">
                   {winnerAvatar ? (
-                    <Image
+                    <Avatar
                       src={winnerAvatar}
                       alt={t("comparison.avatarAlt", { name: winnerName })}
-                      width={20}
-                      height={20}
-                      className="rounded-full ring-1 ring-border"
+                      size={20}
                     />
                   ) : null}
                   <p className="text-sm font-semibold text-cyan-700 dark:text-cyan-300">
diff --git a/next.config.js b/next.config.js
index 2e47547..3228a37 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   typedRoutes: true,
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: "https",