Add Unique Components #1
Description
Description :
To enhance the UI/UX and modularity of the project, we need to add reusable, unique components that follow best practices and align with the design system. These components should be flexible, accessible and responsive.
Acceptance Criteria :
All components must be reusable across different sections of the app.
Ensure that the components are responsive on both mobile and desktop views.
Maintain consistent design patterns and align with the overall UI theme.
Include appropriate tests to verify the functionality.
Components to be added :
- Buttons :
Different button styles (primary, secondary, outlined, etc.)
Support for various sizes (small, medium, large)
States (hover, active, disabled)
Customizable icons and text placement
- Cards :
A flexible card component for displaying content with images, text and actions
Different variants (e.g., image on top, image on bottom)
Optional hover effects for interactivity
- Navigation :
A responsive navigation bar (navbar) with support for dropdowns and side navigation
Mobile-first design, including a collapsible menu
Search bar integrated into the navigation
- Forms :
Input fields (text, email, password, etc.)
Form validation with error messages
Customizable form elements (e.g., checkboxes, radio buttons, selects)
Submit and reset buttons with appropriate feedback
- Tables :
A customizable table component for displaying data
Sorting, pagination and search functionality
Responsive design to handle large tables on mobile