Identify and create reusable components

[Hemanthr1]

Issue Description

Our codebase contains components with similar designs or structures that could be consolidated into reusable components. This redundancy increases maintenance effort and reduces consistency across the application.

Environment

For Frontend Issues:

• Browser: All modern browsers

Steps to Reproduce

This is a general improvement task, not tied to a specific bug. The issue affects the entire application.

Expected Behavior

• Reduced code duplication
• Improved consistency in UI and behavior
• Easier maintenance and updates
• Faster development of new features

Possible Solution

1. Analyze existing components to identify similarities in design or structure
2. Design flexible, prop-driven components that can accommodate various use cases
3. Refactor identified components into reusable versions
4. Create a component library or designate a specific location for reusable components
5. Update existing code to use the new reusable components
6. Document usage and props for each reusable component

Additional Context

• Consider both visual components (e.g., buttons, cards) and structural components (e.g., layouts, data containers)
• Ensure new components are flexible enough to meet current and future needs
• Balance between reusability and avoiding overly complex prop interfaces

Acceptance Criteria

• Existing code updated to use new reusable components
• Documentation created for each new reusable component
• No regression in functionality or design
• Measurable reduction in code duplication