Summary
We'll need a generic Modal component to handle all sorts of interactions in the UI, so having a preset shared component for this is a good idea.
It should be a horizontally and vertically-centered element that is positioned absolutely and is rendered above everything, including the navbar. It should stop the user from scrolling the content behind it while it's open. Think of something like this, for example.
Implementation suggestions
- Should be implemented under
src/shared/.
- Probably the only props that will be needed are
isVisible (for toggling visibility) and children (for populating the modal's body)
- Ideally, we won't be using any external libraries for this to avoid bloat.
- Don't worry too much about styling, as long as it vaguely fits with the rest of the stuff that already exists we can adjust down the line if necessary.