Multi Select Box - Copy this React, Tailwind Component to your project

***Create a box that display list of button, id = records.record.id, name = records.record.name ***State: + records: array ["id_of_the_record":{"record_name":text, selected: 0/1/2}, ...], selected = 0 (deselected), selected = 1 (selected),selected=2(preSelect) + multiSelectMode: true/false ***Styles: Buttons grid: grid col 5 gap 2 Buttons: + Multiselect mode on/off button: bg color gray(when off)/blue(when on) + Record button (selected=0): bg colorgray, font size normal, font weight normal + Record button (selected=2): bg color gray, font size normal, font weight semibold, border color blue + Record button (selected=1): bg color blue, font size normal, font weight normal + Submit select button: bg color blue, font size large, font weight normal *** Behavior: Multiselect mode = off: + When click a record buton,find record that have selected=2 and change it to 0, then set current record.selected=2 + When click to Submit select button:find button that have selected = 2 and change to 1 When multiselect mode is on: + When click a record buton, set selected = 2 + When click to Submit select button, change all record that have selected=2 to 1 When click to record that have selected = 1, change selected to 0