add previews for the rest of the components

resend · Oct 14, 2024 · e2739f8 · e2739f8
1 parent b91824c
commit e2739f8
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 36 deletions.
diff --git a/apps/docs/components/column.mdx b/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 />
diff --git a/apps/docs/components/heading.mdx b/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
 

diff --git a/apps/docs/components/hr.mdx b/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/>
diff --git a/apps/docs/components/link.mdx b/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 />
diff --git a/apps/docs/components/markdown.mdx b/apps/docs/components/markdown.mdx
@@ -7,6 +7,7 @@ icon: "file-code"
 ---
 
 import Support from '/snippets/support.mdx'
+import { ComponentPreview } from '/snippets/component-preview.mdx'
 
 ## Install
 
@@ -44,6 +45,35 @@ pnpm add @react-email/markdown -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Markdown, Html } from "@react-email/components";
+
+const Email = () => {
+  return (
+    <Html lang="en" dir="ltr">
+      <Markdown
+        markdownCustomStyles={{
+          h1: { color: "cyan" },
+          h2: { color: "blue" },
+          codeInline: { background: "grey" },
+        }}
+        markdownContainerStyles={{
+          padding: "12px",
+          border: "solid 1px #eee",
+        }}
+      >{`# Hello, World!`}</Markdown>
+
+      {/* OR */}
+
+      <Markdown markdownCustomStyles={{
+        h1: {
+          color: "#eee"
+        }
+      }} children={`# This is a ~~strikethrough~~`} />
+    </Html>
+  );
+};
+'>
 ```jsx
 import { Markdown, Html } from "@react-email/components";
 
@@ -52,23 +82,28 @@ const Email = () => {
     <Html lang="en" dir="ltr">
       <Markdown
         markdownCustomStyles={{
-          h1: { color: "red" },
+          h1: { color: "cyan" },
           h2: { color: "blue" },
           codeInline: { background: "grey" },
         }}
         markdownContainerStyles={{
           padding: "12px",
-          border: "solid 1px black",
+          border: "solid 1px #eee",
         }}
       >{`# Hello, World!`}</Markdown>
 
       {/* OR */}
 
-      <Markdown children={`# This is a ~~strikethrough~~`} />
+      <Markdown markdownCustomStyles={{
+        h1: {
+          color: "#eee"
+        }
+      }} children={`# This is a ~~strikethrough~~`} />
     </Html>
   );
 };
 ```
+</ComponentPreview>
 
 ## Props
 

diff --git a/apps/docs/components/row.mdx b/apps/docs/components/row.mdx
@@ -6,7 +6,8 @@ description: "Display a row that separates content areas horizontally in your em
 icon: "table-rows"
 ---
 
-import Support from '/snippets/support.mdx'
+import Support from "/snippets/support.mdx";
+import { ComponentPreview } from "/snippets/component-preview.mdx";
 
 ## Install
 
@@ -44,24 +45,94 @@ pnpm add @react-email/row -E
 
 Add the component to your email template. Include styles where needed.
 
+<ComponentPreview code='
+import { Row, Column, Section } from "@react-email/components";
+
+const Email = () => {
+return (
+<Section>
+<Row
+style={{
+          height: "33.333vh"
+        }} >
+<Column
+style={{
+            textAlign: "center",
+            backgroundColor: "#ff7b6b",
+          }} >
+A
+</Column>
+</Row>
+<Row
+style={{
+          height: "33.333vh"
+        }} >
+<Column
+style={{
+            textAlign: "center",
+            backgroundColor: "#78ff69",
+          }} >
+B
+</Column>
+</Row>
+<Row
+style={{
+          height: "33.333vh"
+        }} >
+<Column
+style={{
+            textAlign: "center",
+            backgroundColor: "#6482fa",
+          }} >
+C
+</Column>
+</Row>
+</Section>
+);
+};
+'>
+
 ```jsx
 import { Row, Column, Section } from "@react-email/components";
 
 const Email = () => {
   return (
     <Section>
-      <Row>
-        <Column>A</Column>
+      <Row style={{ height: "33.333vh" }}>
+        <Column
+          style={{
+            textAlign: "center",
+            backgroundColor: "#ff7b6b",
+          }}
+        >
+          A
+        </Column>
       </Row>
-      <Row>
-        <Column>B</Column>
+      <Row style={{ height: "33.333vh" }}>
+        <Column
+          style={{
+            textAlign: "center",
+            backgroundColor: "#78ff69",
+          }}
+        >
+          B
+        </Column>
       </Row>
-      <Row>
-        <Column>C</Column>
+      <Row style={{ height: "33.333vh" }}>
+        <Column
+          style={{
+            textAlign: "center",
+            backgroundColor: "#6482fa",
+          }}
+        >
+          C
+        </Column>
       </Row>
     </Section>
   );
 };
 ```
 
-<Support/>
+</ComponentPreview>
+
+<Support />