Command Palette

Create a Command Palette that opens up with Keyboard events like Command + K. In this problem, The command palette will have navigation links to which a user can navigate. Also, the user can search on the page on the command palette for a link to which they want to navigate.

User Stories and Tasks

1. On clicking of Command + K (on Mac) and
   Control + K (on windows), A modal should pop up that will be an overlay on the screen.
2. The modal should work on all the pages and throughout the application.
3. The modal should contain the links to specific pages on the application. The links for the application are provided in the /constants/navlinks.ts file. Navlinks will have name, link and icon fields associated. Icons are provided in the same file.
4. On clicking the modal background, the modal should close.
5. On clicking the modal body, the modal should NOT close.
6. Your application should handle routing for /home, /about and /playground pages. Use react-router-dom package for routing. Version 5 or 6 both are fine.
7. When the modal is opened, the input search box should be autofocused. That means, the user should not have to manually click in the input box.
8. Clicking on any nav link inside the command palette should take you to the desired page.
9. Clicking on any nav link inside the command palette should close the command palette.

Resources

1. /icons folder contains all the necessary SVG icons.
2. React Router V5 documentation

Demo UI