Create the tags selection component which will be used in the collection creation Details Page.
Business Rules
The tags field must autocomplete the user text with the tags that starts with the matching text. We will suggest to the user at most 3 (it may have less, including 0) tags based on the text input. In the end of these suggested tags list, it must
have a CREATE TAG button, which will create a new tag with the text input. It shouldn't be possible to create an empty tag ("").
The user may remove the tags by tapping the x button in the right corner of the tags.
If the tags width is greater than the screen width, it must wrap the tags below each other, similar how Flutter's Wrap Widget works (this will impact the field height, which should adjust itself based on the new content height).
The tags must have at most 20 characters and they can have space.
Screenshots
Tags component
![CleanShot 2021-10-27 at 16 51 55](https://user-images.githubusercontent.com/11745745/139138480-14c69af9-3f30-4730-b1b4-7cc246e012fb.png)
Summary
Create the tags selection component which will be used in the collection creation Details Page.
Business Rules
The
tags
field must autocomplete the user text with the tags that starts with the matching text. We will suggest to the user at most 3 (it may have less, including 0) tags based on the text input. In the end of these suggested tags list, it must have aCREATE TAG
button, which will create a new tag with the text input. It shouldn't be possible to create an empty tag (""
).The user may remove the tags by tapping the
x
button in the right corner of the tags.If the tags width is greater than the screen width, it must wrap the tags below each other, similar how Flutter's Wrap Widget works (this will impact the field height, which should adjust itself based on the new content height).
The tags must have at most 20 characters and they can have space.
Screenshots
Tags component
![CleanShot 2021-10-27 at 16 51 55](https://user-images.githubusercontent.com/11745745/139138480-14c69af9-3f30-4730-b1b4-7cc246e012fb.png)