ToDo list component needed

BillyG83 commented 2 years ago

Web3uiKit needs a nice to do list maker.

Features from the design:

button is disabled when the input is empty
input has no placeholder but has a label, this label could be from the to do list components name prop
when a value is added the button will become clickable
when clicked the value of the input will be placed into an array and cleared
each array item is displayed like in the design, a full width option might be nice, you can get creative but the default should match the design please
each array item should be an <li> and be grouped in a <ul>
if an array / listed item is clicked on the 'x' it should be removed, you should be able to use <Button /> for this, check out this demo in our Storybook, https://web3ui.github.io/web3uikit/?path=/story/2-forms-button--primary&args=theme:secondary;size:small;color:blue;icon:x;iconLayout:icon-only;isTransparent:true
most importantly the component should return the array any time it changes

akinolu52 commented 2 years ago

@BillyG83 i think there's an error with the second point

input has no placeholder but has a label, this label could be from the to do list components name prop

from the design: there's a placeholder but no label...

BillyG83 commented 2 years ago

haha @akinolu52 yeah it looks like that, but checkout Input... the label jumps up when you focus on the input https://web3ui.github.io/web3uikit/?path=/story/2-forms-input--default-input

it all yours bro GO GO GO!

web3ui / web3uikit