Task to be completed within 72 hours.

Tech Stack - HTML5, SASS and Vue.js/React.js.

This assignment represents your problem solving skills, eye for detail, DRY
principle, BEM naming convention, HTML5 Tags, use of slots,
store(Application state management), computed properties, watchers, lifecycle
hooks, etc.

Note - Use font awesome icons for all the icons.

1. Build the sidebar with all the states available as shown in the figma file
attached.
2. Add a search bar to search available actions.
3. Assign actions by selecting single or multiple actions at once and pressing
confirm.
4. Single click on action opens its configuration(form) in the same sidebar.
5. Ability to make an action inactive or delete it.
6. Back icon in the sidebar header takes you to the previous state.
7. Create reusable components for all the input fields.
8. All the input fields should use two-way data binding.
9. Show each action configuration in the main section in the same order as it is
in the sidebar.

Assignment Link