feat: add hovercards to list contributors page (#1980)

open-sauced · Oct 23, 2023 · 7e5ab98 · 7e5ab98
2 parents 8711529 + 01ca13c
commit 7e5ab98
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/components/atoms/Avatar/avatar-hover-card.tsx b/components/atoms/Avatar/avatar-hover-card.tsx
@@ -10,27 +10,42 @@ import { getAvatarByUsername } from "lib/utils/github";
 declare interface AvatarProps {
   contributor: string;
   repositories: number[];
+  size?: "small" | "large";
 }
 
-const AvatarHoverCard = ({ contributor, repositories }: AvatarProps): JSX.Element => (
-  <HoverCard.Root>
-    <Link href={`/user/${contributor}`} as={`/user/${contributor}`}>
-      <HoverCard.Trigger asChild>
-        <Image
-          alt={contributor}
-          className="border rounded-full"
-          height={500}
-          src={getAvatarByUsername(contributor, 40)}
-          width={500}
-        />
-      </HoverCard.Trigger>
-    </Link>
-    <HoverCard.Portal>
-      <HoverCard.Content sideOffset={5}>
-        <HoverCardWrapper username={contributor} repositories={repositories} />
-      </HoverCard.Content>
-    </HoverCard.Portal>
-  </HoverCard.Root>
-);
+const AvatarHoverCard = ({ contributor, repositories, size = "large" }: AvatarProps): JSX.Element => {
+  let width = 500;
+  let height = 500;
+
+  switch (size) {
+    case "small":
+      width = 35;
+      height = 35;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <HoverCard.Root>
+      <Link href={`/user/${contributor}`} as={`/user/${contributor}`}>
+        <HoverCard.Trigger asChild>
+          <Image
+            alt={contributor}
+            className="border rounded-full"
+            height={width}
+            src={getAvatarByUsername(contributor, 40)}
+            width={height}
+          />
+        </HoverCard.Trigger>
+      </Link>
+      <HoverCard.Portal>
+        <HoverCard.Content sideOffset={5}>
+          <HoverCardWrapper username={contributor} repositories={repositories} />
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
+  );
+};
 
 export default AvatarHoverCard;
diff --git a/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx b/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx
@@ -11,6 +11,7 @@ import useContributorPullRequests from "lib/hooks/api/useContributorPullRequests
 import useRepoList from "lib/hooks/useRepoList";
 import { useFetchUser } from "lib/hooks/useFetchUser";
 import Checkbox from "components/atoms/Checkbox/checkbox";
+import AvatarHoverCard from "components/atoms/Avatar/avatar-hover-card";
 import { getActivity } from "../RepoRow/repo-row";
 import DevProfile from "../DevProfile/dev-profile";
 
@@ -155,14 +156,7 @@ const ContributorListTableRow = ({
         )}
 
         {/* Column: Contributors */}
-        <div className={clsx("flex-1 lg:min-w-[12.5rem] overflow-hidden")}>
-          <DevProfile
-            company={user?.company || getLastContributedRepo(data)}
-            username={login}
-            hasBorder={!contributor.author_login}
-          />
-        </div>
-
+        <AvatarHoverCard contributor={contributor.username} repositories={[]} size="small" />
         {/* Column: Act */}
         <div className={clsx("flex-1 flex lg:max-w-[6.25rem] w-fit justify-center")}>
           {contributor.author_login ? getActivity(totalPrs, false) : "-"}