fix: stats layout and add tooltips (#101)

* fix stats layout and add tooltips * removed unnecessary title tag to the contribution title * removed broken tooltip in contribution titles, use of title tag * add TS type --------- Co-authored-by: sa.cux <[email protected]>
DevLeonardoCommunity · Jan 31, 2024 · c0cb404 · c0cb404
1 parent 14eb9a1
commit c0cb404
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 53 deletions.
diff --git a/src/components/RepositoryContributionsCard.tsx b/src/components/RepositoryContributionsCard.tsx
@@ -1,4 +1,4 @@
-import { Contributions, Repository } from "@/types/github";
+import { Contributions, PullRequestNode, Repository } from "@/types/github";
 import Image from "next/image";
 import Link from "next/link";
 import { FaCodeMerge } from "react-icons/fa6";
@@ -13,58 +13,80 @@ export const RepositoryContributionsCard = ({
   contributions: Contributions;
 }) => {
   return (
-    <div className="card bg-base-100">
-      <div className="card-body">
-        <h2 className="card-title flex justify-between">
-          <div className="flex justify-center items-center gap-2">
-            <Image
-              src={repository.owner.avatarUrl}
-              alt={repository.owner.login}
-              width={40}
-              height={40}
-              className="rounded-full"
-            />
-            <Link
-              href={`https://github.com/${repository.owner.login}/${repository.name}`}
-              rel="noopener noreferrer"
-              target="_blank"
-              className="hover:underline"
-              aria-label={`${repository.name}`}
-            >
-              {repository.owner.login}/{repository.name}
-            </Link>
-          </div>
-          <div className="tooltip tooltip-left" data-tip="Total contributions">
-            <div className="rounded outline outline-1 cursor-default px-2">
-              {totalCount}
-            </div>
-          </div>
-        </h2>
-        <div className="max-h-[22rem] hide-scrollbar overflow-auto flex flex-col gap-1">
-          {nodes?.map(({ pullRequest: { state, title, id, url } }: any) => (
-            <div key={id} className="flex items-center justify-between gap-2">
-              <a href={url} target="_blank" className="truncate" title={title}>
-                {title}
-              </a>
-              <span
-                className={`h-fit rounded p-1 ${
-                  state === "MERGED"
-                    ? "bg-purple-500"
-                    : state === "CLOSED"
-                    ? "bg-red-500"
-                    : "bg-green-500"
-                }`}
+    <div className="card bg-base-100 overflow-visible">
+      <div className="sm:w-auto card bg-base-100 repository-card">
+        <div className="card-body">
+          <div className="card-title flex items-center justify-between">
+            <div className="flex items-center space-x-2 flex-grow">
+              <Image
+                src={repository.owner.avatarUrl}
+                alt={repository.owner.login}
+                width={40}
+                height={40}
+                className="rounded-full"
+              />
+              <div
+                className="grid grid-flow-col gap-2 flex-grow tooltip text-left"
+                data-tip={`${repository.owner.login}/${repository.name}`}
               >
-                {state === "MERGED" ? (
-                  <FaCodeMerge size={18} />
-                ) : state === "CLOSED" ? (
-                  <IoIosCloseCircleOutline size={18} />
-                ) : (
-                  <GoIssueOpened size={18} />
-                )}
-              </span>
+                <Link
+                  href={`https://github.com/${repository.owner.login}/${repository.name}`}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className="hover:underline truncate flex-grow"
+                  aria-label={`${repository.name}`}
+                >
+                  <h3 className="logged-user truncate">
+                    {repository.owner.login}/{repository.name}
+                  </h3>
+                </Link>
+              </div>
+              <div
+                className="tooltip tooltip-left"
+                data-tip="Total contributions"
+              >
+                <div className="rounded outline outline-1 cursor-default px-2">
+                  {totalCount}
+                </div>
+              </div>
             </div>
-          ))}
+          </div>
+          <div className="max-h-[22rem] hide-scrollbar overflow-auto flex flex-col gap-1">
+            {nodes?.map(
+              ({ pullRequest: { state, title, id, url } }: PullRequestNode) => (
+                <div
+                  key={id}
+                  className="flex items-center justify-between gap-2"
+                >
+                  <a
+                    href={url}
+                    target="_blank"
+                    className="truncate"
+                    title={title}
+                  >
+                    {title}
+                  </a>
+                  <span
+                    className={`h-fit rounded p-1 ${
+                      state === "MERGED"
+                        ? "bg-purple-500"
+                        : state === "CLOSED"
+                        ? "bg-red-500"
+                        : "bg-green-500"
+                    }`}
+                  >
+                    {state === "MERGED" ? (
+                      <FaCodeMerge size={18} />
+                    ) : state === "CLOSED" ? (
+                      <IoIosCloseCircleOutline size={18} />
+                    ) : (
+                      <GoIssueOpened size={18} />
+                    )}
+                  </span>
+                </div>
+              )
+            )}
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/pages/stats/[login].tsx b/src/pages/stats/[login].tsx
@@ -178,7 +178,7 @@ export default function Stats() {
                 </li>
               </ul>
             </div>
-            <div className="w-full grid xl:grid-cols-3 gap-3 mb-3 md:grid-cols-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-4">
               {filteredRepositories?.length > 0
                 ? filteredRepositories?.map(
                     ({ repository, contributions }, i) => (
@@ -280,7 +280,7 @@ export default function Stats() {
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
-          <div className="flex sm:items-start items-center justify-center sm:justify-start">
+          <div className="flex sm:items-start items-center justify-center md:justify-start">
             <input
               type="checkbox"
               name="hide-own-repo"

diff --git a/src/types/github.ts b/src/types/github.ts
@@ -16,6 +16,7 @@ export type PullRequest = {
   id: string;
   title: string;
   state: "MERGED" | "CLOSED" | "OPEN";
+  url: string;
 };
 
 export type Repository = {