[Frontend] StatsCard Component

[wkim10]

Description

As you can see on the Figma, our goated designer An made a dashboard for the web app. One of the most important things that we have to do when building our frontend is to make components. These will increase modularity and so will allow us to reuse them throughout the app without having to rewrite the same code. You can see an example of a component we made in src/components/ExampleButton.tsx.

The component that we are tasking you with making is one for the “StatsCard” component at the top of the dashboard (ignore the other card component under “Upcoming events” for now, that’ll be a future ticket 👀). You can see that each of the cards have pretty much the same layout, with the only differences being the stat, icon, date, and title. This makes it a perfect example of turning something into a component.

Throughout it all, you’ll get more and more familiar with using the Tailwind and Iconify libraries. Tailwind will be used for general styling (CSS) and you can use Iconify for icons. You should definitely reference the Tailwind documentation, and you can look for icons on Iconify using the following link: https://icon-sets.iconify.design/

Testing

Honestly, not too much to test here. You can test your component by placing it in src/app/private/admin/home/page.tsx or src/app/private/volunteer/home/page.tsx. We recommend you try putting in various numbers, dates, icons and anything else you can think of into the component to handle possible edge cases.

Once you’re done with that, feel free to make a PR (Pull Request).