Created reusable component for contributors Avatar (ohcnetwork#521)

components/contributors/ContributorImage.tsx

@@ -3,36 +3,52 @@ import Image from "next/image";
 interface ContributorImageProps {
   contributorGithub: string;
   rank: number | null;
-  height: number;
-  width: number;
+  size: "small" | "medium" | "large";
+  className?: string;
 }
+
+const sizes = {
+  small: { height: 30, width: 30 },
+  medium: { height: 50, width: 50 },
+  large: { height: 100, width: 100 },
+};
+
 const ContributorImage = ({
   contributorGithub,
   rank,
-  height,
-  width,
+  size,
+  className = "",
 }: ContributorImageProps) => {
-  function contributorRankClasses(rank: number | null): string {
+  const { height, width } = sizes[size];
+  function topContributorClasses(rank: number | null): string {
     if (!rank || rank > 3) {
-      return "text-purple-500";
+      return "border-4 border-purple-500";
     }
-    const rankColor = ["text-yellow-600", "text-stone-600", "text-amber-700"][
-      rank - 1
+    const rankColors = [
+      "text-yellow-600 border-yellow-500 bg-yellow-100",
+      "text-stone-600 border-gray-500 bg-gray-200",
+      "text-amber-700 border-amber-700 bg-amber-100",
     ];
-    return `${rankColor} animate-circular-shadow`;
+    return `border-4 ${rankColors[rank - 1]} animate-circular-shadow`;
   }
 
   return (
     <div
-      className={`dark:border-1 shrink-0 rounded-full border-2 border-current ${contributorRankClasses(rank)}`}
+      className={`relative inline-block shrink-0 overflow-hidden rounded-full ${topContributorClasses(
+        rank,
+      )} ${className}`}
+      style={{ width: `${width}px`, height: `${height}px` }}
     >
       <Image
-        className="rounded-full"
         src={`https://avatars.githubusercontent.com/${contributorGithub}`}
-        alt={contributorGithub}
-        height={height}
+        alt={`Contributor ${contributorGithub}`}
         width={width}
+        height={height}
+        className="rounded-full object-cover"
       />
+      {rank && rank <= 3 && (
+        <div className="absolute inset-0 rounded-full bg-black opacity-10"></div>
+      )}
     </div>
   );
 };

components/contributors/InfoCard.tsx

@@ -38,8 +38,7 @@ export default async function InfoCard({
             <ContributorImage
               contributorGithub={contributor.github}
               rank={rank}
-              height={112}
-              width={112}
+              size="large"
             />
           </Link>
         </div>

components/contributors/LeaderboardCard.tsx

@@ -50,8 +50,7 @@ export default function LeaderboardCard({
               <ContributorImage
                 contributorGithub={contributor.user.social.github}
                 rank={position + 1}
-                height={56}
-                width={56}
+                size="large"
               />
               <div className="ml-4 mr-4 basis-3/5 text-wrap pr-10">
                 <div className="w-[180px] truncate font-bold text-green-500">