fix: add hovercard to most active contributors avatars in list (#2157)

open-sauced · Nov 16, 2023 · e02d1db · e02d1db
1 parent db856f0
commit e02d1db
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/components/atoms/Avatar/avatar-hover-card.tsx b/components/atoms/Avatar/avatar-hover-card.tsx
@@ -9,7 +9,7 @@ import { getAvatarByUsername } from "lib/utils/github";
 
 declare interface AvatarProps {
   contributor: string;
-  size?: "xsmall" | "small" | "large";
+  size?: "xsmall" | "small" | "medium" | "large";
 }
 
 type AvatarHoverCard = AvatarProps & {
@@ -29,6 +29,11 @@ export const Avatar = ({ contributor, size = "large" }: AvatarProps): JSX.Elemen
       width = 45;
       height = 45;
       break;
+
+    case "medium":
+      width = 35;
+      height = 35;
+      break;
     default:
       break;
   }

diff --git a/components/molecules/MostActiveContributorsCard/most-active-contributors-card.tsx b/components/molecules/MostActiveContributorsCard/most-active-contributors-card.tsx
@@ -1,6 +1,6 @@
 import { useSprings, animated } from "@react-spring/web";
 import { useGesture } from "@use-gesture/react";
-import Image from "next/image";
+
 import { ReactNode, useState } from "react";
 import * as RawTooltip from "@radix-ui/react-tooltip";
 import Button from "components/atoms/Button/button";
@@ -12,11 +12,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "components/atoms/Dropdown/dropdown";
-import { getAvatarByUsername } from "lib/utils/github";
 import PeopleIcon from "img/icons/people.svg";
 import ChevronDownIcon from "img/chevron-down.svg";
 import SVGIcon from "components/atoms/SVGIcon/svg-icon";
 import Tooltip from "components/atoms/Tooltip/tooltip";
+import AvatarHoverCard from "components/atoms/Avatar/avatar-hover-card";
 
 // omit total_contributions and login from ContributorStat
 type StatKeys = keyof Omit<ContributorStat, "total_contributions" | "login">;
@@ -310,13 +310,7 @@ function GraphRow({
 
   return (
     <>
-      <Image
-        className="block w-8 h-8 rounded-full grid-cols-1"
-        src={getAvatarByUsername(user.login, 64)}
-        width={64}
-        height={64}
-        alt={user.login}
-      />
+      <AvatarHoverCard repositories={[]} contributor={user.login} size="medium" />
       <div className="flex items-center text-sm text-slate-900 grid-cols-2">{user.login}</div>
       <div className="flex items-stretch grid-cols-3">
         <div