Skip to content

Commit c0cb404

Browse files
theflucsfuoridallarete
theflucs
and
fuoridallarete
authored
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]>
1 parent 14eb9a1 commit c0cb404

File tree

3 files changed

+76
-53
lines changed

3 files changed

+76
-53
lines changed

‎src/components/RepositoryContributionsCard.tsx‎

Lines changed: 73 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Contributions, Repository } from "@/types/github";
1+
import { Contributions, PullRequestNode, Repository } from "@/types/github";
22
import Image from "next/image";
33
import Link from "next/link";
44
import { FaCodeMerge } from "react-icons/fa6";
@@ -13,58 +13,80 @@ export const RepositoryContributionsCard = ({
1313
contributions: Contributions;
1414
}) => {
1515
return (
16-
<div className="card bg-base-100">
17-
<div className="card-body">
18-
<h2 className="card-title flex justify-between">
19-
<div className="flex justify-center items-center gap-2">
20-
<Image
21-
src={repository.owner.avatarUrl}
22-
alt={repository.owner.login}
23-
width={40}
24-
height={40}
25-
className="rounded-full"
26-
/>
27-
<Link
28-
href={`https://github.com/${repository.owner.login}/${repository.name}`}
29-
rel="noopener noreferrer"
30-
target="_blank"
31-
className="hover:underline"
32-
aria-label={`${repository.name}`}
33-
>
34-
{repository.owner.login}/{repository.name}
35-
</Link>
36-
</div>
37-
<div className="tooltip tooltip-left" data-tip="Total contributions">
38-
<div className="rounded outline outline-1 cursor-default px-2">
39-
{totalCount}
40-
</div>
41-
</div>
42-
</h2>
43-
<div className="max-h-[22rem] hide-scrollbar overflow-auto flex flex-col gap-1">
44-
{nodes?.map(({ pullRequest: { state, title, id, url } }: any) => (
45-
<div key={id} className="flex items-center justify-between gap-2">
46-
<a href={url} target="_blank" className="truncate" title={title}>
47-
{title}
48-
</a>
49-
<span
50-
className={`h-fit rounded p-1 ${
51-
state === "MERGED"
52-
? "bg-purple-500"
53-
: state === "CLOSED"
54-
? "bg-red-500"
55-
: "bg-green-500"
56-
}`}
16+
<div className="card bg-base-100 overflow-visible">
17+
<div className="sm:w-auto card bg-base-100 repository-card">
18+
<div className="card-body">
19+
<div className="card-title flex items-center justify-between">
20+
<div className="flex items-center space-x-2 flex-grow">
21+
<Image
22+
src={repository.owner.avatarUrl}
23+
alt={repository.owner.login}
24+
width={40}
25+
height={40}
26+
className="rounded-full"
27+
/>
28+
<div
29+
className="grid grid-flow-col gap-2 flex-grow tooltip text-left"
30+
data-tip={`${repository.owner.login}/${repository.name}`}
5731
>
58-
{state === "MERGED" ? (
59-
<FaCodeMerge size={18} />
60-
) : state === "CLOSED" ? (
61-
<IoIosCloseCircleOutline size={18} />
62-
) : (
63-
<GoIssueOpened size={18} />
64-
)}
65-
</span>
32+
<Link
33+
href={`https://github.com/${repository.owner.login}/${repository.name}`}
34+
rel="noopener noreferrer"
35+
target="_blank"
36+
className="hover:underline truncate flex-grow"
37+
aria-label={`${repository.name}`}
38+
>
39+
<h3 className="logged-user truncate">
40+
{repository.owner.login}/{repository.name}
41+
</h3>
42+
</Link>
43+
</div>
44+
<div
45+
className="tooltip tooltip-left"
46+
data-tip="Total contributions"
47+
>
48+
<div className="rounded outline outline-1 cursor-default px-2">
49+
{totalCount}
50+
</div>
51+
</div>
6652
</div>
67-
))}
53+
</div>
54+
<div className="max-h-[22rem] hide-scrollbar overflow-auto flex flex-col gap-1">
55+
{nodes?.map(
56+
({ pullRequest: { state, title, id, url } }: PullRequestNode) => (
57+
<div
58+
key={id}
59+
className="flex items-center justify-between gap-2"
60+
>
61+
<a
62+
href={url}
63+
target="_blank"
64+
className="truncate"
65+
title={title}
66+
>
67+
{title}
68+
</a>
69+
<span
70+
className={`h-fit rounded p-1 ${
71+
state === "MERGED"
72+
? "bg-purple-500"
73+
: state === "CLOSED"
74+
? "bg-red-500"
75+
: "bg-green-500"
76+
}`}
77+
>
78+
{state === "MERGED" ? (
79+
<FaCodeMerge size={18} />
80+
) : state === "CLOSED" ? (
81+
<IoIosCloseCircleOutline size={18} />
82+
) : (
83+
<GoIssueOpened size={18} />
84+
)}
85+
</span>
86+
</div>
87+
)
88+
)}
89+
</div>
6890
</div>
6991
</div>
7092
</div>

‎src/pages/stats/[login].tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export default function Stats() {
178178
</li>
179179
</ul>
180180
</div>
181-
<div className="w-full grid xl:grid-cols-3 gap-3 mb-3 md:grid-cols-2">
181+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-4">
182182
{filteredRepositories?.length > 0
183183
? filteredRepositories?.map(
184184
({ repository, contributions }, i) => (
@@ -280,7 +280,7 @@ export default function Stats() {
280280
onChange={(e) => setSearchQuery(e.target.value)}
281281
/>
282282
</div>
283-
<div className="flex sm:items-start items-center justify-center sm:justify-start">
283+
<div className="flex sm:items-start items-center justify-center md:justify-start">
284284
<input
285285
type="checkbox"
286286
name="hide-own-repo"

‎src/types/github.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export type PullRequest = {
1616
id: string;
1717
title: string;
1818
state: "MERGED" | "CLOSED" | "OPEN";
19+
url: string;
1920
};
2021

2122
export type Repository = {

0 commit comments

Comments
 (0)