A resizable iframe wrapper for previewing content at different device widths.
The height of the iframe automatically adjusts to fit the content. Note that it does not replicate the browser's full responsive device mode: network and CPU throttling, as well as user agent changes, are not supported.
Since <Viewport> uses an <iframe>, you must provide a page which can be loaded into it. If you used the timvir
cli to scaffold your component, you already have one such sample (in src/components/…/samples/basic.tsx). Make that
sample available via a Next.js page and load it into the <Viewport>.
See also Concepts: Component Sample.
The <Viewport> displays a gray, animated background while the iframe is loading.
When the Viewport points to something else than a HTML document (eg. an image), it'll stay the default height, but display the contents nonetheless.
TODO: display a nice error message describing the problem.