[FEAT] - COMPONENT -> Custom Dropdown

[Joebim]

Description

Create a custom dropdown component. The dropdown should be able to display a list of options and allow the user to select one.

Acceptance Criteria

• The dropdown displays a list of options when clicked.
• The selected option is displayed when an option is chosen.
• Smooth animations for opening and closing the dropdown.
• Fully responsive design, ensuring usability on mobile devices.

Requirements

• Display a list of options passed as props.
• Show the selected option in the dropdown.
• Implement smooth animations for opening and closing the dropdown.
• Ensure the dropdown is fully responsive for mobile, adjusting layout and functionality as needed.

Props

CustomDropdown

• options: array - The list of options to display.
• selectedOption: string - The currently selected option.
• onSelect: function - Function to call when an option is selected.

Tests

• Verify the list of options is displayed correctly when the dropdown is clicked.
• Verify the selected option is displayed in the dropdown.
• Verify smooth animations for opening and closing the dropdown.
• Ensure the dropdown is fully responsive on mobile devices, maintaining usability and accessibility.

Tasks

• Create CustomDropdown component.
• Implement the functionality to display and select options.
• Add smooth animations for opening and closing the dropdown.
• Ensure the dropdown is fully responsive for mobile devices, adjusting layout and functionality as needed.

Links

• Figma Link: https://www.figma.com/design/7Jl49r5rLPVzqorAVLKF1x/Team-Language-Learning-AI?node-id=1495-3926&t=xEektLQWY8ZSAY8m-4

{{Image}}

[mminuwaali]

Feature has been implemented and tested, waiting for approval