feat: create mobile version of repo table

components/atoms/Pill/pill.tsx

@@ -14,7 +14,7 @@ const Pill: React.FC<PillProps> = ({ className, text, color = "slate", size = "b
       className={`
         ${color === "green" ? "bg-light-grass-4 " : color === "yellow" ? "bg-amber-200 " : color === "red" ? "bg-light-red-4 " : "bg-light-slate-4 "}
         ${size === "small" ? "py-1 px-1.5 gap-1 " : "py-1.5 px-2 gap-1 "}
-        inline-flex rounded-full`}>
+        inline-flex items-center rounded-full`}>
       {icon}
 
       <div

components/molecules/Pagination/pagination.tsx

@@ -1,3 +1,4 @@
+import { useMediaQuery } from "lib/hooks/useMediaQuery";
 import humanizeNumber from "lib/utils/humanizeNumber";
 import React, { useState } from "react";
 import { RiArrowLeftSLine } from "react-icons/ri";
@@ -42,7 +43,7 @@ const Pagination = ({
     <div className=" w-max flex gap-x-4 items-center ">
       <div className="flex items-center gap-x-4">
         <button className="text-light-slate-9 disabled:text-light-slate-7" disabled={!hasPreviousPage ? true : false} onClick={() => handlePrev()}>
-          <RiArrowLeftSLine onClick={() => handlePrev()} className="text-lg  " />
+          <RiArrowLeftSLine onClick={() => handlePrev()} className="text-2xl md:text-lg" />
         </button>
         {pages.map((page, index) => {
           return (
@@ -63,7 +64,7 @@ const Pagination = ({
         })}
 
         <button  className="text-light-slate-9 disabled:text-light-slate-7" disabled={!hasNextPage ? true : false} onClick={() => handleNext()}>
-          <RiArrowRightSLine className="text-lg" />
+          <RiArrowRightSLine className="text-2xl md:text-lg" />
         </button>
       </div>
       <div

components/molecules/PaginationResults/pagination-result.tsx

@@ -8,9 +8,11 @@ interface PaginationResultsProps {
   entity: string; // The entity name
 }
 const PaginationResults = ({ from, to, entity, total }: PaginationResultsProps): JSX.Element => {
+
+
   return (
     <div className="flex items-center gap-x-1 font-medium text-sm text-light-slate-9 tracking-tight">
-      <span>Showing</span> <span className="text-light-slate-12">{from} -</span>
+      <span className="hidden md:block">Showing</span> <span className="text-light-slate-12">{from} -</span>
       <span className="text-light-slate-12">{to}</span> of {total > 999 ? humanizeNumber(total, null) : total}
       <span>{entity}</span>
     </div>

components/molecules/PullRequestOverview/pull-request-overview.tsx

@@ -30,8 +30,9 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({ className, op
         {/* Churn Number compared with previous date (default: last 30 days vs. previous 30 days range) */}
         <div className={`
           ${churnDirection === "up" ? "text-light-grass-10" : "text-light-red-10"}
-          font-medium text-base tracking-tight`}>
-          {churnDirection === "up" ? <ArrowUpIcon size={14} /> : <ArrowDownIcon size={14} />}{activePrPercentage || 0}%
+          font-medium flex items-center gap-x-1 text-base tracking-tight`}>
+          {churnDirection === "up" ? <ArrowUpIcon size={14} /> : <ArrowDownIcon size={14} />}{churn || 0}%
+
         </div>
       </div>
 

components/molecules/RepoRow/repo-row.tsx

@@ -1,19 +1,17 @@
-import { ArrowTrendingDownIcon, ArrowTrendingUpIcon, MinusSmallIcon } from "@heroicons/react/24/solid";
-import StackedAvatar from "components/molecules/StackedAvatar/stacked-avatar";
+import { ArrowTrendingDownIcon, ArrowTrendingUpIcon, ChevronDownIcon, ChevronUpIcon, MinusSmallIcon } from "@heroicons/react/24/solid";
 import { RepositoriesRows } from "components/organisms/RepositoriesTable/repositories-table";
-
-import {classNames} from "components/organisms/RepositoriesTable/repositories-table";
-import TableRepositoryName from "../TableRepositoryName/table-repository-name";
 import Pill from "components/atoms/Pill/pill";
-import PullRequestOverview from "../PullRequestOverview/pull-request-overview";
-
-import Sparkline from "components/atoms/Sparkline/sparkline";
-
 import { useContributionsList } from "lib/hooks/useContributionsList";
 import { useRepositoryCommits } from "lib/hooks/useRepositoryCommits";
 import differenceInDays from "date-fns/differenceInDays";
-
-interface RepoRowProps {
+import TableRepositoryName from "../TableRepositoryName/table-repository-name";
+import Sparkline from "components/atoms/Sparkline/sparkline";
+import PullRequestOverview from "../PullRequestOverview/pull-request-overview";
+import StackedAvatar from "../StackedAvatar/stacked-avatar";
+import { useState } from "react";
+import { classNames } from "components/organisms/RepositoriesTable/repositories-table";
+import clsx from "clsx";
+interface RepoProps {
   repo: RepositoriesRows;
 }
 
@@ -94,13 +92,27 @@ const getPrsSpam = (total: number, spam: number): number => {
   return result;
 };
 
-const RepoRow = ({repo}:RepoRowProps): JSX.Element => {
-  const { name, owner: handle, owner_avatar: ownerAvatar, openPrsCount, closedPrsCount, draftPrsCount, mergedPrsCount, spamPrsCount, churn, churnTotalCount, churnDirection, prVelocityCount, prActiveCount } = repo;
+
+const RepoRow = ({repo}:RepoProps): JSX.Element => {
+  const { name,
+    owner: handle,
+    owner_avatar: ownerAvatar,
+    openPrsCount,
+    closedPrsCount,
+    draftPrsCount,
+    mergedPrsCount,
+    spamPrsCount,
+    churn,
+    churnTotalCount,
+    churnDirection,
+    prVelocityCount } = repo;
+
   const { data: contributorData, meta: contributorMeta } = useContributionsList(repo.id, "", "updated_at");
   const { data: commitsData, meta: commitMeta, isLoading: commitLoading } = useRepositoryCommits(repo.id);
   const totalPrs = getTotalPrs(openPrsCount, mergedPrsCount, closedPrsCount, draftPrsCount);
   const prsMergedPercentage = getPrsMerged(totalPrs, mergedPrsCount || 0);
   const spamPrsPercentage = getPrsSpam(totalPrs, spamPrsCount || 0);
+
 
   const days = getCommitsLast30Days(commitsData);
   const last30days = [
@@ -111,56 +123,147 @@ const RepoRow = ({repo}:RepoRowProps): JSX.Element => {
     }
   ];
 
-  return (<div className={`${classNames.row}`}>
-
-    {/* Column: Repository Name */}
-    <div className={classNames.cols.repository}>
-      <TableRepositoryName avatarURL={ownerAvatar} name={name} handle={handle}></TableRepositoryName>
-    </div>
-
-    {/* Column: Activity */}
-    <div className={classNames.cols.activity}>
-      { getActivity(commitMeta.itemCount, commitLoading) }
+  const [tableOpen, setTableOpen] = useState<boolean>(false);
+  return (<>
+    <div key={`${ownerAvatar}/${name}`} className="odd:bg-white md:hidden px-5 overflow-hidden py-2  even:bg-light-slate-2">
+      {/* Row: Repository Name and Pr overview */}
+      <div className="flex items-center gap-x-3">
+        <div className="w-[55%]">
+          <TableRepositoryName avatarURL={ownerAvatar} name={name} handle={handle} />
+        </div>
+        <div className="w-[45%]">
+          <PullRequestOverview
+            open={openPrsCount}
+            merged={mergedPrsCount}
+            closed={closedPrsCount}
+            draft={draftPrsCount}
+            churn={churnTotalCount}
+            churnDirection={`${churnDirection}`}
+          />
+        </div>
+        <div className="">
+          <div
+            onClick={() => setTableOpen(!tableOpen)}
+            className="border rounded-md p-1 w-6 h-6 items-center justify-between"
+          >
+
+            {tableOpen ? <ChevronUpIcon className="" /> : <ChevronDownIcon />}
+          </div>
+        </div>
+      </div>
+
+      <div className={`${!tableOpen && "max-h-0"} font-medium text-light-slate-11 text-sm transition`}>
+        {/* Column: Last 30 Days */}
+        <div className="py-3">{last30days && <Sparkline data={last30days} width="100%" height={54} />}</div>
+        {/* Row: Activity */}
+        <div className="flex items-center py-3 border-b justify-between">
+          <div>Activity</div>
+          {getActivity(commitMeta.itemCount, commitLoading)}
+        </div>
+
+        {/* Row: Pr velocity */}
+        <div className="flex items-center py-3 border-b justify-between">
+          <div>Pr Velocity</div>
+          <div className="flex text-base gap-x-3">
+            <div>
+              {prVelocityCount ?? 0} PR{prVelocityCount === 1 ? "" : "s"}
+            </div>
+            <Pill text={`${prsMergedPercentage}%`} size="small" color="green" />
+          </div>
+        </div>
+
+        {/* Row: SPAM */}
+        <div className="flex items-center py-3 border-b justify-between">
+          <div>Spam</div>
+          <div className="flex text-base gap-x-3">
+            {spamPrsCount && spamPrsCount > 0 ? (
+              <>
+                <div>
+                  {spamPrsCount || 0} PR{spamPrsCount === 1 ? "" : "s"}
+                </div>
+                <Pill
+                  text={`${spamPrsPercentage || 0}%`}
+                  size="small"
+                  color={spamPrsPercentage > 10 ? "red" : "yellow"}
+                />
+              </>
+            ) : (
+              "-"
+            )}
+          </div>
+        </div>
+
+        {/* Row: Contributors */}
+
+        <div className="flex items-center py-3 justify-between">
+          <div>Contributors</div>
+          <div className="flex text-base items-center">
+            {contributorMeta.itemCount! > 0 ? <StackedAvatar contributors={contributorData} /> : "-"}
+
+            {contributorMeta.itemCount! >= 5 ? <div>&nbsp;{`+${contributorMeta.itemCount - 5}`}</div> : ""}
+          </div>
+        </div>
+
+        <div onClick={() => setTableOpen(!tableOpen)} className="text-center border rounded-lg py-1 mt-3">
+            Hide details
+        </div>
+      </div>  
     </div>
-
-    {/* Column: PR Overview */}
-    <div className={classNames.cols.prOverview}>
-      <PullRequestOverview open={openPrsCount} merged={mergedPrsCount} closed={closedPrsCount} draft={draftPrsCount} churn={churnTotalCount} churnDirection={`${churnDirection}`} prActiveCount={prActiveCount}></PullRequestOverview>
-    </div>
-
-    {/* Column: PR Velocity */}
-    <div className={`${classNames.cols.prVelocity}`}>
-      <div>{ prVelocityCount ?? 0 } PR{ prVelocityCount === 1 ? "" : "s" }</div>
-      <Pill text={`${prsMergedPercentage}%`} size="small" color="green" />
-    </div>
-
-    {/* Column: SPAM */}
-    <div className={`${classNames.cols.spam}`}>
-      {
-        spamPrsCount && spamPrsCount > 0 ?  
+    <div className={`${classNames.row} `}>
+      {/* Column: Repository Name */}
+      <div className={classNames.cols.repository}>
+        <TableRepositoryName avatarURL={ownerAvatar} name={name} handle={handle}></TableRepositoryName>
+      </div>
+
+      {/* Column: Activity */}
+      <div className={classNames.cols.activity}>{getActivity(commitMeta.itemCount, commitLoading)}</div>
+
+      {/* Column: PR Overview */}
+      <div className={classNames.cols.prOverview}>
+        <PullRequestOverview
+          open={openPrsCount}
+          merged={mergedPrsCount}
+          closed={closedPrsCount}
+          draft={draftPrsCount}
+          churn={churnTotalCount}
+          churnDirection={`${churnDirection}`}
+        ></PullRequestOverview>
+      </div>
+
+      {/* Column: PR Velocity */}
+      <div className={`${classNames.cols.prVelocity}`}>
+        <div>
+          {prVelocityCount ?? 0} PR{prVelocityCount === 1 ? "" : "s"}
+        </div>
+        <Pill text={`${prsMergedPercentage}%`} size="small" color="green" />
+      </div>
+
+      {/* Column: SPAM */}
+      <div className={`${classNames.cols.spam}`}>
+        {spamPrsCount && spamPrsCount > 0 ? (
           <>
-            <div>{spamPrsCount || 0} PR{ spamPrsCount === 1 ? "" : "s" }</div>
+            <div>
+              {spamPrsCount || 0} PR{spamPrsCount === 1 ? "" : "s"}
+            </div>
             <Pill text={`${spamPrsPercentage || 0}%`} size="small" color={spamPrsPercentage > 10 ? "red" : "yellow"} />
           </>
-          :
+        ) : (
           "-"
-      }
-    </div>
+        )}
+      </div>
 
-    {/* Column: Contributors */}
-    <div className={`flex ${classNames.cols.contributors}`}>
-      { contributorMeta.itemCount! > 0 ? <StackedAvatar contributors={contributorData}/> : "-" }
+      {/* Column: Contributors */}
+      <div className={clsx(classNames.cols.contributors, "hidden lg:flex")}>
+        {contributorMeta.itemCount! > 0 ? <StackedAvatar contributors={contributorData} /> : "-"}
 
-      { contributorMeta.itemCount! >= 5 ? <div>&nbsp;{`+${contributorMeta.itemCount - 5}`}</div>: "" }
-    </div>
+        {contributorMeta.itemCount! >= 5 ? <div>&nbsp;{`+${contributorMeta.itemCount - 5}`}</div> : ""}
+      </div>
 
-    {/* Column: Last 30 Days */}
-    <div className={classNames.cols.last30days}>
-      { last30days &&
-        <Sparkline data={last30days} />
-      }
+      {/* Column: Last 30 Days */}
+      <div className={clsx(classNames.cols.last30days,"hidden lg:flex" )}>{last30days && <Sparkline data={last30days} />}</div>
     </div>
-  </div>)
+  </>)
+
   ;
 };
 export default RepoRow;