11import type { RepoItem } from '@/types' ;
22import { emojify } from '@twuni/emojify' ;
3- import {
4- GoAlertFill ,
5- GoIssueOpened ,
6- GoRepoForked ,
7- GoStar
8- } from 'react-icons/go' ;
3+ import { GoIssueOpened , GoRepoForked , GoStar } from 'react-icons/go' ;
94import { ReportButton } from './report-button' ;
105
6+ const MAX_DESCRIPTION_LENGTH = 100 ;
7+ const MAX_TOPICS_DISPLAY = 3 ;
8+
119interface RepoCardProps {
1210 repo : RepoItem ;
1311}
1412
1513export function RepoCard ( { repo } : RepoCardProps ) {
14+ const truncatedDescription =
15+ repo . description . length > MAX_DESCRIPTION_LENGTH
16+ ? repo . description . substring ( 0 , MAX_DESCRIPTION_LENGTH ) + '...'
17+ : repo . description ;
18+
19+ // Ensure 'hacktoberfest' topic appears first
20+ const sortedTopics = [ ...repo . topics ] . sort ( ( a , b ) => {
21+ if ( a === 'hacktoberfest' ) return - 1 ;
22+ if ( b === 'hacktoberfest' ) return 1 ;
23+ return 0 ;
24+ } ) ;
25+
26+ const displayedTopics = sortedTopics . slice ( 0 , MAX_TOPICS_DISPLAY ) ;
27+ const hasMoreTopics = sortedTopics . length > MAX_TOPICS_DISPLAY ;
28+
29+ const numberFormatter = new Intl . NumberFormat ( 'en-US' , {
30+ notation : 'compact' ,
31+ compactDisplay : 'short'
32+ } ) ;
33+
1634 return (
17- < section className = "transition duration-300 shadow-sm card bg-2023-void-2 ring-1 ring-2023-manga-3 hover:scale-105 hover:shadow-2xl hover:shadow-2023-bavarian-gold-2/30 " >
35+ < section className = "transition duration-300 shadow-sm card bg-hacktoberfest-black ring-1 ring-hacktoberfest-light-pink hover:scale-105 hover:shadow-2xl hover:shadow-hacktoberfest-deep-pink h-96 " >
1836 < div className = "relative p-6 card-body" >
1937 < div className = "flex-1" >
2038 < div className = "flex items-center gap-2" >
2139 < a
22- className = "border-2 rounded-full h-14 aspect-square p-1.5 border-neutral-100 "
40+ className = "border-2 rounded-full h-14 aspect-square p-1.5 border-hacktoberfest-beige "
2341 href = { repo . owner . html_url }
2442 title = { repo . owner . login }
2543 target = "_blank"
@@ -31,7 +49,7 @@ export function RepoCard({ repo }: RepoCardProps) {
3149 className = "rounded-full"
3250 />
3351 </ a >
34- < h2 className = "overflow-hidden text-3xl cursor-pointer hover:underline text-2023-bavarian-gold-2 whitespace-nowrap text-ellipsis" >
52+ < h2 className = "overflow-hidden text-3xl cursor-pointer text-hacktoberfest-pink whitespace-nowrap text-ellipsis underline-expand " >
3553 < a
3654 href = { repo . html_url }
3755 title = { repo . name }
@@ -44,87 +62,85 @@ export function RepoCard({ repo }: RepoCardProps) {
4462 < ReportButton repo = { repo } />
4563 </ div >
4664
47- < h6 className = "my-5 text-lg text-2023-manga-2" >
48- { emojify ( repo . description ) }
65+ < h6 className = "my-5 text-lg text-hacktoberfest-beige" >
66+ { emojify ( truncatedDescription ) }
67+ { repo . description . length > MAX_DESCRIPTION_LENGTH && (
68+ < a
69+ href = { repo . html_url }
70+ target = "_blank"
71+ rel = "noreferrer"
72+ className = "text-hacktoberfest-pink ml-2 underline-expand"
73+ >
74+ Read more
75+ </ a >
76+ ) }
4977 </ h6 >
5078
5179 < div className = "card-actions gap-y-3" >
52- { repo . topics . map ( ( topic : string ) => (
80+ { displayedTopics . map ( ( topic : string ) => (
5381 < a
5482 key = { topic }
5583 href = { `https://github.com/topics/${ topic } }
5684 target = "_blank"
5785 rel = "noreferrer"
5886 className = { `badge inline px-3 py-0.5 h-auto ${
5987 topic === 'hacktoberfest'
60- ? 'bg-2023-bavarian-gold-1 text-2023-void-2 '
61- : 'bg-2023-bavarian-blue-2 text-2023-void-2 '
88+ ? 'bg-hacktoberfest-light-green text-hacktoberfest-dark-green '
89+ : 'bg-hacktoberfest-deep-pink text-hacktoberfest-light-pink '
6290 } `}
6391 >
6492 { topic }
6593 </ a >
6694 ) ) }
95+ { hasMoreTopics && (
96+ < span className = "text-hacktoberfest-pink ml-2" > ...</ span >
97+ ) }
6798 </ div >
6899 </ div >
69100
70101 { /* stars and forks cards */ }
71- < div className = "flex flex-wrap justify-between gap-3 mt-8 cursor-pointer container-query xl:gap-5 text-neutral-100" >
102+ < div className = "flex flex-wrap justify-between gap-4 mt-8 cursor-pointer container-query text-neutral-100" >
72103 < a
73104 href = { `${ repo . html_url } }
74105 target = "_blank"
75- className = "group w-full flex-shrink-0 flex-grow-1 basis-[120px] border rounded-xl p-3 xl:px-4 flex items-center gap-2 xl:gap-3 relative"
106+ className = "w-full flex-shrink-0 flex-grow basis-[120px] border rounded-xl flex items-center justify-center py-4 gap-3 relative border-hacktoberfest-pink tooltip tooltip-bottom"
107+ data-tip = "Click to see stargazers"
76108 >
77- < GoStar className = "text-2xl text-yellow-200 " />
109+ < GoStar className = "text-2xl text-hacktoberfest-pink " />
78110 < div className = "flex flex-col" >
79- < div className = "text-lg xl:text-2xl font-medium mb-0.5" >
80- { repo . stargazers_count }
111+ < div className = "text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-light " >
112+ { numberFormatter . format ( repo . stargazers_count ) }
81113 </ div >
82114 < div className = "text-xs text-neutral-300 lg:text-sm" > Stars</ div >
83115 </ div >
84- < div
85- id = "tooltip"
86- className = "absolute hidden px-2 py-1 text-sm rounded-md group-hover:block bg-2023-void-2 text-2023-bavarian-gold-2"
87- >
88- Checkout all the stars here!
89- </ div >
90116 </ a >
91117 < a
92118 href = { `${ repo . html_url } }
93119 target = "_blank"
94- className = "group flex-shrink-0 flex-grow-1 basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
120+ className = "flex-shrink-0 flex-grow basis-[120px] border rounded-xl p-4 flex items-center justify-center gap-3 relative border-hacktoberfest-pink tooltip tooltip-bottom"
121+ data-tip = "Click to see forks"
95122 >
96- < GoRepoForked className = "text-2xl text-yellow-200 " />
123+ < GoRepoForked className = "text-2xl text-hacktoberfest-pink " />
97124 < div className = "flex flex-col" >
98- < div className = "text-lg xl:text-2xl font-medium mb-0.5" >
99- { repo . forks }
125+ < div className = "text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-light " >
126+ { numberFormatter . format ( repo . forks ) }
100127 </ div >
101128 < div className = "text-xs text-neutral-300 lg:text-sm" > Forks</ div >
102129 </ div >
103- < div
104- id = "tooltip"
105- className = "absolute hidden px-2 py-1 text-sm rounded-md group-hover:block bg-2023-void-2 text-2023-bavarian-gold-2"
106- >
107- Checkout all the forks here!
108- </ div >
109130 </ a >
110131 < a
111132 href = { `${ repo . html_url } }
112133 target = "_blank"
113- className = "group issues-btn flex-shrink-0 flex-grow-1 basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
134+ className = "flex-shrink-0 flex-grow basis-[120px] border rounded-xl p-4 flex items-center justify-center gap-3 relative border-hacktoberfest-pink tooltip tooltip-bottom"
135+ data-tip = "Click to see issues"
114136 >
115- < GoIssueOpened className = "text-2xl text-yellow-200 " />
137+ < GoIssueOpened className = "text-2xl text-hacktoberfest-pink " />
116138 < div className = "flex flex-col" >
117- < div className = "text-lg xl:text-2xl font-medium mb-0.5" >
118- { repo . open_issues_count }
139+ < div className = "text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-light " >
140+ { numberFormatter . format ( repo . open_issues_count ) }
119141 </ div >
120142 < div className = "text-xs text-neutral-300 lg:text-sm" > Issues</ div >
121143 </ div >
122- < div
123- id = "tooltip"
124- className = "absolute hidden px-2 py-1 text-sm rounded-md group-hover:block bg-2023-void-2 text-2023-bavarian-gold-2"
125- >
126- Checkout all open issues here!
127- </ div >
128144 </ a >
129145 </ div >
130146 </ div >
0 commit comments