feat: :heavy_plus_sign: Adding export as image in profile page

[dimassibassem]

Resolve #39

This pull request introduces a feature to the /profile page – the addition of a sleek export button. This button empowers users to export an Image of the card of their profile.

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @Balastrong on Vercel.

@Balastrong first needs to authorize it.

[dimassibassem]

Hey @Balastrong,

Thank you for your feedback on the pull request! I've reviewed your comments and incorporated your suggestions into the latest changes.

Regarding the width issue with the download, I've addressed this concern in the new commit. The download width should now be in line with the expected dimensions. example:

I've taken your suggestion into account about the filename in the function. In the new commit, it become this way

a.download = filename ? `${filename}.png` : "image.png";

I've carefully considered your observation about the async/await handler. In response, I've removed the async/await structure for now. However, I want to clarify that the initial reason for its inclusion was to pave the way for potential notifications after the function's resolution in the future. Your attention to detail and thoughtful questions are greatly appreciated, as they prompted me to rethink the necessity in the present context. Please feel free to share any additional thoughts or suggestions you might have!

[Balastrong]

Thank you for the changes, looks perfect now!

I also agree with the async/await explanation, it totally makes sense! Actually, we could already spawn an issue on the repo to implement our own toast system (to practice building one!) and when it's ready we can indeed put it after the download function inside the onClick :)

---

I see there's a little conflict on src/pages/stats/[login].tsx now, could you please fix it?

[dimassibassem]

Hey @Balastrong, Should be resolved now