feat(docs): Preview for components

[gabrielmfern]

THis PR implements a snippet that allows us to pass in React code that contains a Email constant containing a React component for an example email using the given component. An example of its usage would be

<ComponentPreview
    code='
import { Button } from "@react-email/components";

const Email = () => {
    return <Button>Hello world!</Button>;
}
'
>
```jsx
import { Button } from "@react-email/components";

const Email = () => {
    return <Button>Hello world!</Button>;
}
```
</ComponentPreivew>

It does require us to write the code twice due to Mintlify limitations, as it does not have a proper component for rendering code outside using common Markdown backticks.

Another limitation to this snippet caused by Mintlify is that on the CodeBlock preview, the actual rendered code on the preview looses its indentation due to some internal problem in Mintlify. We really should address that before merging this.

On another note, the way this snippet works is by using jsdelivr to get @react-email/components and React itself, on an iframe. It has some base code that is the starting srcDoc for the iframe that uses the code to render and then writes out the given HTML into the iframe's document. This does give a bit of a moment of white that makes the experience a bit poorer, but is unavoidable unless we could use actual React inside the docs.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: e2739f8625b0fdfbbcdf1b02e485499c94867ab7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-email	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 3:41pm
react-email-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 3:41pm