Create reusable component for contributors Avatar

[dgparmar14]

URL:

https://contributors.ohc.network

Browser Name:

Chrome

Browser Version:

-

Operating System:

-

How to reproduce the issue:

Title: Refactor: Create reusable component for contributor images

Description:

We currently have multiple instances where contributor images are used throughout the codebase. To improve code maintainability and reusability, we should create a single component that can be reused wherever contributor images are needed.

Requirements:

1. Create a new reusable component for displaying contributor images.
2. The component should support three different sizes: small, medium, and large.
3. Ensure the component can be easily integrated into existing parts of the code where contributor images are used.
4. Update all instances of contributor images in the codebase to use the new component.
5. For the Leaderboard route, it must show a color shade on the contributor's image for the top 3 contributors.

Tasks:

1. Design and implement the reusable component.
2. Define and implement the three image sizes:
   • Small (This size will be used in the Feed's title image of the contributor)
   • Medium (In the Leaderboard route)
   • Large (This will show in the Contributor's profile and at the home route in the top 8 contributors)
3. Replace existing instances of contributor images with the new component.
4. Implement color shading for the top 3 contributors' images on the Leaderboard route.

[androemeda]

@dgparmar14 please assign this issue to me

[BarryByte]

@rithviknishad Hello i would like to contribute to this repo, please assign this issue to me. Thanks.