Implement Dynamic Labels & Repository Languages in the Contribute Page #1126
+81
−80
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,15 +6,13 @@ import { desktopViewMinWidth } from 'utils/constants' | |
| import { Icons } from 'utils/data' | ||
| import { TooltipRecipe } from 'utils/theme' | ||
| import { getSocialIcon } from 'utils/urlIconMappings' | ||
| import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper' | ||
| import ActionButton from 'components/ActionButton' | ||
| import ContributorAvatar from 'components/ContributorAvatar' | ||
| import DisplayIcon from 'components/DisplayIcon' | ||
| import Markdown from 'components/MarkdownWrapper' | ||
| import { Tooltip } from 'components/ui/tooltip' | ||
|
|
||
| const isMobileInitial = typeof window !== 'undefined' && window.innerWidth < desktopViewMinWidth | ||
|
|
||
| const Card = ({ | ||
|
|
@@ -29,24 +27,25 @@ const Card = ({ | |
| projectLink, | ||
| social, | ||
| tooltipLabel, | ||
| labels, | ||
| repository_languages, | ||
| }: CardProps) => { | ||
| const [isMobile, setIsMobile] = useState(isMobileInitial) | ||
|
|
||
| useEffect(() => { | ||
| const checkMobile = () => setIsMobile(window.innerWidth < desktopViewMinWidth) | ||
| window.addEventListener('resize', checkMobile) | ||
| return () => window.removeEventListener('resize', checkMobile) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div | ||
| className={`mx-auto mb-2 mt-4 flex w-full max-w-[95%] flex-col items-start rounded-md border border-border bg-white dark:bg-[#212529] md:max-w-6xl ${ | ||
| isMobile ? 'px-2 pb-2' : 'px-4 pb-4' | ||
| }`} | ||
| > | ||
| <div className="mt-2 flex w-full flex-col items-start gap-4 pt-2 sm:flex-col sm:gap-4 md:pt-0"> | ||
| <div className="flex w-full flex-wrap items-center gap-3"> | ||
| {level && ( | ||
| <Tooltip | ||
| closeDelay={100} | ||
|
|
@@ -58,9 +57,7 @@ const Card = ({ | |
| showArrow | ||
| > | ||
| <span | ||
| className="flex h-8 w-8 items-center justify-center rounded-full text-xs shadow" | ||
| style={{ backgroundColor: level.color }} | ||
| > | ||
| <FontAwesomeIconWrapper icon={level.icon} className="text-white" /> | ||
|
|
@@ -71,16 +68,14 @@ const Card = ({ | |
| <Link href={url} target="_blank" rel="noopener noreferrer" className="flex-1"> | ||
| <h1 | ||
| className="max-w-full break-words text-base font-semibold text-blue-400 sm:break-normal sm:text-lg lg:text-2xl" | ||
| style={{ transition: 'color 0.3s ease' }} | ||
| > | ||
| {title} | ||
| </h1> | ||
| </Link> | ||
| </div> | ||
|
|
||
| {icons && Object.keys(Icons).some((key) => icons[key]) && ( | ||
| <div className="-ml-1.5 flex flex-grow"> | ||
| {Object.keys(Icons).map((key, index) => | ||
| icons[key] ? ( | ||
|
|
@@ -92,24 +87,52 @@ const Card = ({ | |
| ) : null | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
|
|
||
| {projectName && ( | ||
| <Link | ||
| href={projectLink} | ||
| rel="noopener noreferrer" | ||
| className="mt-2 font-medium text-sky-600 dark:text-sky-400" | ||
| > | ||
| {projectName} | ||
| </Link> | ||
| )} | ||
|
|
||
| <Markdown content={summary} className="py-2 pr-4 text-gray-600 dark:text-gray-300" /> | ||
|
|
||
rishyym0927 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| {repository_languages && repository_languages.length > 0 && ( | ||
| <div className="mt-1 flex flex-wrap gap-1 pr-4"> | ||
| {repository_languages.map((lang, index) => ( | ||
| <span | ||
| key={`lang-${index}`} | ||
| className="rounded-md bg-gray-100 px-3 py-1 text-sm font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300" | ||
| > | ||
| {lang} | ||
| </span> | ||
| ))} | ||
| </div> | ||
| )} | ||
|
|
||
| {labels?.length > 0 && ( | ||
|
There was a problem hiding this comment. Labels background changes on smaller screens 🤔 There was a problem hiding this comment. @kasya sorry for the delay will fix this issue soon!! |
||
| <div className="mt-2 flex flex-wrap gap-2 pr-4"> | ||
| {labels.map((label, index) => ( | ||
| <span | ||
| key={`label-${index}`} | ||
| className={`rounded-md px-3 py-1 text-sm font-medium ${ | ||
| isMobile | ||
| ? 'bg-sky-200 text-sky-900' | ||
| : 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300' | ||
| }`} | ||
| > | ||
| {label} | ||
| </span> | ||
| ))} | ||
| </div> | ||
| )} | ||
|
|
||
| <div className="flex w-full flex-wrap items-center justify-between gap-6"> | ||
| <div className="mt-3 flex w-full flex-wrap items-center gap-2"> | ||
| {topContributors?.map((contributor, index) => ( | ||
| <ContributorAvatar | ||
|
|
@@ -119,56 +142,30 @@ const Card = ({ | |
| /> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="flex w-full items-center justify-between"> | ||
| {social && social.length > 0 && ( | ||
| <HStack id="social" mt={2}> | ||
| {social.map((item) => ( | ||
| <Link | ||
| key={`${item.title}-${item.url}`} | ||
| href={item.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| display="flex" | ||
| alignItems="center" | ||
| gap={2} | ||
| > | ||
| <FontAwesomeIcon icon={getSocialIcon(item.url)} className="h-5 w-5" /> | ||
| </Link> | ||
| ))} | ||
| </HStack> | ||
| )} | ||
| <ActionButton tooltipLabel={tooltipLabel} url={button.url} onClick={button.onclick}> | ||
rishyym0927 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| {button.icon} | ||
| {button.label} | ||
| </ActionButton> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We used to have these labels before, so thanks for adding those back.
One of the features they had is that they were clickable with the label/topic being added to a search field and fetching filtered records.
Do you think you could add that too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"Hey @kasya, that's a great idea! Thanks for suggesting it. Since implementing this would require some modifications to the backend, I think it would be best to address it in a new issue. I'm currently working on the backend and will make sure to include this feature in future updates