Add custom avatar component

[SamusElderg]

See custom avatar component in: https://github.com/code4rena-dev/code4rena.com/pull/419

Bring it into this repo so that we have a central place to contribute to it ongoing

[SamusElderg]

I might close this issue off and leave it in the frontend nextjs repo. Reason being; we will lose the on-the-fly advantages of image processing via next/image (which obviously isnt possible with this vite project without using some kind of CDN img service)

Thoughts @leo95oliveira ?

We do however use react-avatar in the navbar of this component library which id still like to get rid of, so might be worth making a lightweight (and non-exported) avatar component to rule that dep out of this component library. It wont have any image optimization advantages, but its only for a single avatar in this lib as apposed to 100s of them on the leaderboard, ill make a PR for this and leave it here as a 'maybe' for us to discuss/consider

EDIT: Actually i see the navbar is the old one anyway, maybe we close this issue completely for now, probably no need to track it at all

[leo95oliveira]

I was thinking of this more recently @SamusElderg ! Initially when I programmed these component, I tried to keep them open enough so that they wouldn't apply to just one framework, which is why I don't use anything specific to NextJS. For things such as images though, instead of just passing an image path/url, maybe we should allow for passing an HTML element so that we can pass things like NextJS' tag. That should hopefully allow for the optimizations of Next Image and any other framework.

[SamusElderg]

@leo95oliveira that makes sense for sure! ill look into it, good idea!