Link Previewer

Create a Link Previewer component in React that takes in children prop, that, when hovered over, displays the link that was provided to the component as a URL prop. This preview component will be an overlay component that displays the website based on their URLs.

Note: Read the documentation for Microlink to understand how to take a screenshot of any website.

User stories and Tasks

1. Given any url to the <LinkPreviewer> component, A popover / modal should appear on top of the link that will show the screenshot of that website.
2. The screenshot has to be dynamic and not any hardcoded image.
3. Use Microlink to capture screenshot by understanding their fetch request.
4. Preview should only appear on Hover and disappear on mouse leave.
5. The preview should appear on top of the link.
6. The component structure should look something like this:

<LinkPreview url="https://manuarora.in">
    Hover over me to Preview
</LinkPreview>

Bonus and Optional Tasks

1. Add framer-motion library to animate entry and exit of the component.
2. The component should always be visible and should not go out of the screen, breaking the responsiveness.
3. Make the Preview also clickable.