refactor(ui): clean up and modularize components for better reusability

Description:

After this update, each user contribution displayed in the Contributions section will include informative badges such as Timestamp, Location, Size, and Duration. These visual tags enhance the clarity and detail of each entry, allowing users to quickly understand key metadata associated with their audio, video, text, and image contributions. While the backend integration for these fields are done, this UI improvement lays the groundwork for a more informative and user-friendly contribution view.

Type of Change:

• Feature Development

Testing:

• Tested on desktop
• Tested in different browsers

Screenshots:

Video Demo

https://drive.google.com/file/d/1k__salrslbH7IdFKzaOPT5GEGvXtQX-B/view?usp=sharing

Link to code walkthrough https://code.swecha.org/corpus/frontend/-/tree/akshay?ref_type=heads

Checklist:

• Code follows project style guidelines
• Self-review completed
• No console errors
• TypeScript types are correct