feat(docs): Preview for components

apps/docs/components/button.mdx

@@ -6,7 +6,8 @@ description: "A link that is styled to look like a button."
 icon: "b"
 ---
 
-import Support from '/snippets/support.mdx'
+import Support from "/snippets/support.mdx";
+import { ComponentPreview } from "/snippets/component-preview.mdx";
 
 <Info>
   Semantics: Quite often in the email world we talk about buttons, when actually
@@ -49,20 +50,45 @@ pnpm add @react-email/button -E
 
 Add the component to your email template. Include styles where needed.
 
-```jsx
+<ComponentPreview code='
+  import { Button } from "@react-email/components";
+
+  const Email = () => {
+    return (
+      <Button
+        href="https://example.com"
+        style={{ 
+          color: "#101010", 
+          backgroundColor: "#eee", 
+          borderRadius: 6, 
+          padding: "10px 20px" 
+        }}
+      >
+        Click me
+      </Button>
+    );
+  };
+'>
+```tsx
 import { Button } from "@react-email/components";
 
 const Email = () => {
   return (
     <Button
       href="https://example.com"
-      style={{ color: "#61dafb", padding: "10px 20px" }}
+      style={{ 
+        color: "#101010", 
+        backgroundColor: "#eee", 
+        borderRadius: 6, 
+        padding: "10px 20px" 
+      }}
     >
       Click me
     </Button>
   );
 };
 ```
+</ComponentPreview>
 
 ## Props
 
@@ -74,4 +100,4 @@ const Email = () => {
   Specify the target attribute for the button link
 </ResponseField>
 
-<Support/>
+<Support />

apps/docs/components/code-block.mdx

@@ -6,6 +6,7 @@ icon: 'file-lines'
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -43,8 +44,31 @@ pnpm add @react-email/code-block -E
 
 Add the component into your email component as follows.
 
+<ComponentPreview code='
+import { CodeBlock, dracula } from "@react-email/components";
+
+const Email = () => {
+  const code = `export default async (req, res) => {
+  try {
+    const html = await renderAsync(
+      EmailTemplate({ firstName: "John" })
+    );
+    return NextResponse.json({ html });
+  } catch (error) {
+    return NextResponse.json({ error });
+  }
+}`;
+
+  return (<CodeBlock
+    code={code}
+    lineNumbers // add this so that there are line numbers beside each code line
+    theme={{ ...dracula, base: { ...dracula.base, margin: 0 } }}
+    language="javascript"
+  />);
+};
+'>
 ```jsx
-import { CodeBlock, dracula } from '@react-email/code-block';
+import { CodeBlock, dracula } from "@react-email/components";
 
 const Email = () => {
   const code = `export default async (req, res) => {
@@ -66,6 +90,7 @@ const Email = () => {
   />);
 };
 ```
+</ComponentPreview>
 
 This should render a code-block with the desired theme.
 

apps/docs/components/code-inline.mdx

@@ -6,6 +6,7 @@ icon: 'code'
 ---
 
 import Support from '/snippets/support.mdx'
+import {ComponentPreview} from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -43,12 +44,38 @@ pnpm add @react-email/code-inline -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { CodeInline } from "@react-email/components";
+
+const Email = () => {
+  return <CodeInline 
+    style={{ 
+      color: "#eee", 
+      padding: "2px 4px",
+      borderRadius: 4,
+      background: "#202020" 
+    }}
+  >
+    @react-email/code-inline
+  </CodeInline>;
+}
+'>
 ```jsx
-import { CodeInline } from "@react-email/code-inline";
+import { CodeInline } from "@react-email/components";
 
 const Email = () => {
-    return <CodeInline>@react-email/code-inline</CodeInline>;
+  return <CodeInline 
+    style={{ 
+      color: "#eee", 
+      padding: "2px 4px",
+      borderRadius: 4,
+      background: "#202020" 
+    }}
+  >
+    @react-email/code-inline
+  </CodeInline>;
 }
 ```
+</ComponentPreview>
 
 <Support/>

apps/docs/components/column.mdx

@@ -7,6 +7,7 @@ icon: "columns-3"
 ---
 
 import Support from '/snippets/support.mdx'
+import {ComponentPreview} from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,18 +45,80 @@ pnpm add @react-email/column -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Column, Row } from "@react-email/components";
+
+const Email = () => {
+  return (
+    <Row>
+      <Column
+        style={{
+          backgroundColor: "#ff7b6b",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        A
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#78ff69",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        B
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#6482fa",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        C
+      </Column>
+    </Row>
+  );
+};
+'>
 ```jsx
 import { Column, Row } from "@react-email/components";
 
 const Email = () => {
   return (
     <Row>
-      <Column>A</Column>
-      <Column>B</Column>
-      <Column>C</Column>
+      <Column
+        style={{
+          backgroundColor: "#ff7b6b",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        A
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#78ff69",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        B
+      </Column>
+      <Column
+        style={{
+          backgroundColor: "#6482fa",
+          textAlign: "center",
+          height: "100vh"
+        }}
+      >
+        C
+      </Column>
     </Row>
   );
 };
 ```
+</ComponentPreview>
 
 <Support />

apps/docs/components/heading.mdx

@@ -7,6 +7,7 @@ icon: "h1"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,13 +45,25 @@ pnpm add @react-email/heading -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Heading } from "@react-email/components";
+
+const Email = () => {
+  return <Heading as="h2" style={{ color: "rgb(129,215,247)" }}>
+    Lorem ipsum
+  </Heading>;
+};
+'>
 ```jsx
 import { Heading } from "@react-email/components";
 
 const Email = () => {
-  return <Heading as="h2">Lorem ipsum</Heading>;
+  return <Heading as="h2" style={{ color: "rgb(129,215,247)" }}>
+    Lorem ipsum
+  </Heading>;
 };
 ```
+</ComponentPreview>
 
 ## Props
 

apps/docs/components/hr.mdx

@@ -7,6 +7,7 @@ icon: "horizontal-rule"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,12 +45,28 @@ pnpm add @react-email/hr -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Hr, Heading, Text, Section } from "@react-email/components";
+
+const Email = () => {
+  return <Section>
+    <Text style={{ color: "#eee", textAlign: "center" }}>Hello</Text>
+    <Hr />
+    <Text style={{ color: "#eee", textAlign: "center" }}>world</Text>
+  </Section>;
+};
+'>
 ```jsx
-import { Hr } from "@react-email/components";
+import { Hr, Heading, Text, Section } from "@react-email/components";
 
 const Email = () => {
-  return <Hr />;
+  return <Section>
+    <Text style={{ color: "#eee", textAlign: "center" }}>Hello</Text>
+    <Hr />
+    <Text style={{ color: "#eee", textAlign: "center" }}>world</Text>
+  </Section>;
 };
 ```
+</ComponentPreview>
 
 <Support/>

apps/docs/components/link.mdx

@@ -6,7 +6,8 @@ description: "A hyperlink to web pages, email addresses, or anything else a URL
 icon: "link"
 ---
 
-import Support from '/snippets/support.mdx'
+import Support from "/snippets/support.mdx";
+import { ComponentPreview } from "/snippets/component-preview.mdx";
 
 ## Install
 
@@ -44,6 +45,14 @@ pnpm add @react-email/link -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Link } from "@react-email/components";
+
+const Email = () => {
+return <Link href="https://example.com">Example</Link>;
+};
+'>
+
 ```jsx
 import { Link } from "@react-email/components";
 
@@ -52,6 +61,8 @@ const Email = () => {
 };
 ```
 
+</ComponentPreview>
+
 ## Props
 
 <ResponseField name="href" type="string" required>
@@ -62,4 +73,4 @@ const Email = () => {
   Specify the target attribute for the button link
 </ResponseField>
 
-<Support/>
+<Support />