feat: :zap: export stats as image

[dimassibassem]

Resolve #4 This pull request introduces a feature that enhances the usability of the application by allowing users to export stats in two different formats. The addition includes a new button with two distinct options for exporting the stats: downloading an image representation of the statistics and copying the image to the clipboard.

[vercel[bot]]

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

@Balastrong first needs to authorize it.

[Balastrong]

Hey @dimassibassem, thank you for the PR!

I see that you added the button on top of the page (that's ok) and always visible, which means it should also work for text and json, but at the moment it doesn't as it looks for the .grid selector and throws an error in the other two modes.

Before going to the code, do we think it makes sense to export text and json as image? If not, I'd probably move the Export button to the same place it's for the other two modes

---

This also makes us future-proof as e might want to add more filters.

What do you think?

[dimassibassem]

Hey @Balastrong, Thank you for your feedback and for reviewing the initial pull request. I appreciate your insights on the button placement and its behavior across different modes. You're absolutely right. I agree that it might not make sense to export text and JSON as images. I apologize for any confusion caused by the current state of the button behavior.

Please take a look at the new commit whenever you have a moment, I change the button emplacement

[Balastrong]

That's much better now, thank you @dimassibassem!

I noticed a couple of extra things but they're not too critical. You can fix them here on this branch, or if you want I can merge this PR and you can create separate issues so that everyone can pick them up :)

1. The text in the buttons should be centered, or that space below removed

   

2. When I copy the image in the clipboard for some weird reason if I paste it I see that all repos have the same image, did it also happen to you? We might want to further investigate

Let me know how you'd like to proceed! :)

[dimassibassem]

Hey @Balastrong,

Thanks for your feedback! I'm glad you're finding the changes better. 😊

I've made some further observations based on your feedback:

Button Text Alignment: I noticed that the text in the buttons isn't centered as it should be, or there's some space below it. I add a new commit and the button text is centered perfectly.

Image Copying Behavior: I encountered a peculiar behavior when copying the image to the clipboard. Oddly, the first time I click the "Copy to Clipboard" button, it works as expected. However, if I click it again, it seems to replace the images of all the repositories with the same image. This is definitely an unusual behavior that warrants further investigation.

Given these observations, I think it would be a good idea to create a separate issue. This will help us keep track of this specific issue.

Thank you again for bringing these points to my attention!

[dimassibassem]

Hey @Balastrong,

Good news—I've managed to identify and fix this weird behavior. Now the copying function works seamlessly without any image mix-ups.

[Balastrong]

Nice catch @dimassibassem!!

I think that's all for now, LGTM! 🚀

[Balastrong]

@all-contributors please add @dimassibassem for code

[allcontributors[bot]]

@Balastrong

I've put up a pull request to add @dimassibassem! :tada: