Transfer List

Given a list of checkbox items, transfer checked items from one container to the other.

User Stories

The data for the list is given in the data.ts file.
Create a TransfersList component that will handle the entire function.
On clicking of the items on the Left Container, the box should highlight.
On clicking of the items on the Right Container, the box should highlight.
If any of the Arrow Buttons are clicked, the items should move into the respective boxes. For Example, If the First Item from the Left box is moved, it should move to the right box and should be removed from the left box -- finally should be unchecked.
If an item from the left box is moved to left, nothing should happen. Similarly, if an item from the right box is move to right, nothing should happen.
Use tailwindcss for styling.

Get icons from Heroicons.
Styling is not important, functionality is.
Abstract the logic into separate components. For Example, A Container, Checkbox and Controls component architecture will be helpful and clean.

Try using filter javascript array methods to filter out your items.

You will need to know which direction you need to move the checkboxes in. An object that conveys the direction will be helpful

What if you keep track of the left and the right boxes separately? While moving, add checkboxes in one container and remove them from the other.

checked: false will help you keep track of what items are checked and not. You can modify this property on change of the checkboxes.

Uploaded by: Manu Arora