File Refactor into Re-usable Components

[jason2000-cpu]

Current Behavior

The current file layer5\src\sections\Community\Handbook\recognition.js. has 457 lines of code.

Desired Behavior

Create an array of the existing badges
Refactor the code to have re-usable component.
Loop over the array of badges using the re-usable component

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

Note: I would like this issue to be assigned to me

[KatalKavya96]

@leecalcote I would like to work on this issue. Currently all badges are manually added in the UI render, I will create an array of all these badges then loop over the array to render each badge using one reusable component. It will make it look well defined and clean for understanding the component code better also. @leecalcote What do you think?