-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: avatar integration #10184
base: main
Are you sure you want to change the base?
feat: avatar integration #10184
Conversation
create a reusable `getUserAvatar` function to fetch Github user avatar photo
this allows for flexibility in defining the size of the avatar specific pixel values directly in the component, making it easier to maintain and reuse the component across different contexts.
store the calculated value of additional items beyond the truncation point in the `moreItemsCount` variable for improved code readability.
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.
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.
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.
Tested everything and it works. Left a few comments over the userRepos.js code changes.
Thank you for testing these changes |
Fixes Issue
closes #10138
Changes proposed
getUserAvatar
function for generating user avatar URLsAvatar
component that can be utilized throughout the project where user avatars are displayed. The component supports customization options such as size, radius, borders, and link integration for enhanced flexibility and consistencyAvatarGroup
component to efficiently display groups of avatars with the option to truncate and show more items. This component allows customization of avatar size, border, and border color for each item in the group. It enhances code reusability and provides a flexible solution for avatar display within various contexts across the projectUserAvatarGroup
component to efficiently display avatars of multiple users. This component utilizes the AvatarGroup component internally, providing a convenient way to display user avatars fetched from GitHub using the getUserAvatar function. Each avatar is associated with the user's username, profile picture, and a link to their profile pageCheck List (Check all the applicable boxes)
Screenshots
Repos.From.The.Biodrop.Community.Members.-.Google.Chrome.2024-02-06.23-02-23.mp4
dark mode
Step to test
Test Rendering of AvatarGroup:
To create a simple test case to render the UserAvatarGroup component and see if it renders without any errors
1.
localhost:3000/repos
Note to reviewers