feat: avatar integration

[badrivlog]

Fixes Issue

closes #10138

Changes proposed

• Add getUserAvatar function for generating user avatar URLs
• Created a versatile Avatar 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 consistency
• Introduced a new AvatarGroup 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 project
• Implemented the UserAvatarGroup 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 page
• avatarize community repos contributor in the repos page

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

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.

 // Please use the following list of GitHub usernames for testing purposes:
const TEST_GITHUB_USERNAMES = [
  "eddiejaoude",
  "sarajaoude",
  "amandamartin-dev",
  "pradumnasaraf",
  "dan-mba",
  "chinmaymhatre",
  "kumarsonsoff3",
  "sital002",
  "badrivlog",
];

// Replace the `users` prop with the following code when mapping through users:
<AvatarGroup
 itemsSize={20}
 borderedItems
- items={users.map((username) => ({
+ items={TEST_GITHUB_USERNAMES.map((username) => ({
   id: username,
   username,
   image: getUserAvatar(username),
   alt: `Profile picture of ${username}`,
   href: `/${username}`,
 }))}
/>

2. go to localhost:3000/repos
3. ensure that the component renders the avatars correctly with the provided test usernames.
4. verify that clicking on each avatar navigates to the correct user profile.

Note to reviewers

[luismr00]

I don't get any repo data while on development so I created my own. In case anyone else would like to test you can use this mockdata (check attached images).

[badrivlog]

Thanks for your solution👍
During development, to simulate repository data, visit- localhost:3000, navigate to the manage profile page, and add a new GitHub repository. This will allow you to test the functionality effectively(see image below)

[luismr00]

Tested everything and it works. Left a few comments over the userRepos.js code changes.

[badrivlog]

Tested everything and it works. Left a few comments over the userRepos.js code changes.

Thank you for testing these changes