[FEATURE] 🗺️ User Dashboard & Products Pages > Dashboard > implement a reusable segmented control component

[luqmonac56]

figma links:

• https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=4-49513&t=ybfmYNMB6xh8HxXT-1

Description

Develop a reusable Segmented Control component. This component will be used to switch between different views or content sections within the application. The Segmented Control should be visually appealing, responsive, and easy to use. It should include the following features:

Acceptance Criteria

The Segmented Control component is implemented according to the design.
The component should allow customization of segments (labels and values).
Ensure the component is fully responsive and works well across different screen sizes.
The component should handle user interactions such as clicking or tapping on segments.
Ensure accessibility standards are met, including appropriate ARIA roles and keyboard navigation support.

Requirements
The component should receive the following props:

segments: An array of segment objects, each containing label and value.
selected: The value of the currently selected segment.
onChange: A callback function that is triggered when a segment is selected.

Testing

Ensure the component renders correctly with various segment configurations.
Check that the component handles user interactions and updates the selected segment appropriately.
Test the component for responsiveness and accessibility.
Verify that the onChange callback is triggered with the correct value.

Tasks

• Develop the Segmented Control component based on the provided requirements.
• Implement handling for segment selection and user interactions.
• Ensure proper keyboard navigation and ARIA roles for accessibility.
• Write unit tests to ensure the component works as expected.
• Test the component for responsiveness and compatibility across different devices.