feat: Add dynamic Badge & Stats Share Card generator in Contributor Leaderboard

[SamXop123]

Problem:

Currently, contributor badges inside the BadgeModal are static. Users cannot export or share their open-source achievements (points, rank, merged PRs) to external networks like LinkedIn or X/Twitter.

Proposed Feature:

Add a "Share Achievements" button in BadgeModal.tsx that dynamically compiles a premium, downloadable sharing card containing the contributor's GitHub avatar, stats, and unlocked badges on the client-side.

Suggested Approach:

• Card Compiler: Use browser-native HTML5 Canvas or html-to-image client-side to generate a PNG of the stats card dynamically.
• Sharing Flow: Trigger a direct download of the image, and use navigator.share (Web Share API) on mobile for easy sharing.
• Assets: Include Recode Hive branding, username, PR counts, and icons of unlocked badges.

Why this is valuable:

• Gives contributors a verified asset to showcase in their portfolios/resumes.
• Creates a natural word-of-mouth marketing funnel on LinkedIn/X to attract new open-source contributors.

---

Files affected:

• src/components/dashboard/LeaderBoard/BadgeModal.tsx
• src/utils/cardGenerator.ts [NEW]

---

Maintainers, if this is a valid issue, please assign under gssoc26.

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[github-actions]

Thanks for opening this issue. To help maintainers review it faster, please add the missing details below:

• Specify any existing design mockups or references for the "Share Achievements" button and the sharing card layout.
• Clarify the specific data to be included in the sharing card (e.g., format for points, rank).
• Provide information on any libraries or frameworks currently used in the project that could impact implementation.

[github-actions]

👤 Issue assigned to @SamXop123.