No Contacts Empty State Block for React

The contacts live in the page's state: reload and the book is empty, and Start over empties it without a reload. A chosen file is read in the browser and never uploaded, and nothing is saved or sent. To wire it for real, post the contact, or the rows of the file, to your API where the code says so, and add the saved records from the response.

The first line names the columns: it needs name and email, and may have company, in any order and any case. Each line after it is one contact. A comma inside double quotes stays in its cell. Rows without a name, with an email that is not an address, or whose email is already in the book or earlier in the file are left out, and the line under the zone says how many are ready and how many were skipped. Files that are not .csv are refused with a line that says so.

It is the demo's limit, so the list can keep its size and both tabs their height. With three in the book the button stays in the tab order and says the demo is full, and a file with more rows imports as many as fit. Take the limit out and let the list scroll in your app.

Yes. The fields, the chosen file and the list are the block's state, not the tab's, so switching tabs and back leaves them as they were. Both tabs are the same height, so the button and the list under it never move when you switch.

The tabs are a real tab list, the fields have labels, the drop zone is a focusable button named for what it takes, and pressing Enter in a field submits the form. One polite status line says each result, and the tray drawing is decoration, hidden from assistive technology, with the same facts in the list beside it.

The three fields stack and the active tab's button stays pinned to the foot of the screen while the panel is in view. The tray and the list come after it. Nothing scrolls sideways at 320 px.