[pull] main from O2sa:main

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)}
+    />
+  );
+}

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

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">

next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   typedRoutes: true,
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: "https",