Skip to content

Commit 6e5bb82

Browse files
gabrielmferngabrielmfern
committed
add previews for the rest of the components
1 parent 3fcf67c commit 6e5bb82

File tree

8 files changed

+285
-36
lines changed

8 files changed

+285
-36
lines changed

‎apps/docs/components/column.mdx

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ icon: "columns-3"
77
---
88

99
import Support from '/snippets/support.mdx'
10+
import {ComponentPreview} from '/snippets/component-preview.mdx'
1011

1112
## Install
1213

@@ -44,18 +45,80 @@ pnpm add @react-email/column -E
4445

4546
Add the component to your email template. Include styles where needed.
4647

48+
<ComponentPreview code='
49+
import { Column, Row } from "@react-email/components";
50+
51+
const Email = () => {
52+
return (
53+
<Row>
54+
<Column
55+
style={{
56+
backgroundColor: "#ff7b6b",
57+
textAlign: "center",
58+
height: "100vh"
59+
}}
60+
>
61+
A
62+
</Column>
63+
<Column
64+
style={{
65+
backgroundColor: "#78ff69",
66+
textAlign: "center",
67+
height: "100vh"
68+
}}
69+
>
70+
B
71+
</Column>
72+
<Column
73+
style={{
74+
backgroundColor: "#6482fa",
75+
textAlign: "center",
76+
height: "100vh"
77+
}}
78+
>
79+
C
80+
</Column>
81+
</Row>
82+
);
83+
};
84+
'>
4785
```jsx
4886
import { Column, Row } from "@react-email/components";
4987

5088
const Email = () => {
5189
return (
5290
<Row>
53-
<Column>A</Column>
54-
<Column>B</Column>
55-
<Column>C</Column>
91+
<Column
92+
style={{
93+
backgroundColor: "#ff7b6b",
94+
textAlign: "center",
95+
height: "100vh"
96+
}}
97+
>
98+
A
99+
</Column>
100+
<Column
101+
style={{
102+
backgroundColor: "#78ff69",
103+
textAlign: "center",
104+
height: "100vh"
105+
}}
106+
>
107+
B
108+
</Column>
109+
<Column
110+
style={{
111+
backgroundColor: "#6482fa",
112+
textAlign: "center",
113+
height: "100vh"
114+
}}
115+
>
116+
C
117+
</Column>
56118
</Row>
57119
);
58120
};
59121
```
122+
</ComponentPreview>
60123

61124
<Support />

‎apps/docs/components/heading.mdx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ icon: "h1"
77
---
88

99
import Support from '/snippets/support.mdx'
10+
import { ComponentPreview } from '/snippets/component-preview.mdx'
1011

1112
## Install
1213

@@ -44,13 +45,25 @@ pnpm add @react-email/heading -E
4445

4546
Add the component to your email template. Include styles where needed.
4647

48+
<ComponentPreview code='
49+
import { Heading } from "@react-email/components";
50+
51+
const Email = () => {
52+
return <Heading as="h2" style={{ color: "rgb(129,215,247)" }}>
53+
Lorem ipsum
54+
</Heading>;
55+
};
56+
'>
4757
```jsx
4858
import { Heading } from "@react-email/components";
4959

5060
const Email = () => {
51-
return <Heading as="h2">Lorem ipsum</Heading>;
61+
return <Heading as="h2" style={{ color: "rgb(129,215,247)" }}>
62+
Lorem ipsum
63+
</Heading>;
5264
};
5365
```
66+
</ComponentPreview>
5467

5568
## Props
5669

‎apps/docs/components/hr.mdx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ icon: "horizontal-rule"
77
---
88

99
import Support from '/snippets/support.mdx'
10+
import { ComponentPreview } from '/snippets/component-preview.mdx'
1011

1112
## Install
1213

@@ -44,12 +45,28 @@ pnpm add @react-email/hr -E
4445

4546
Add the component to your email template. Include styles where needed.
4647

48+
<ComponentPreview code='
49+
import { Hr, Heading, Text, Section } from "@react-email/components";
50+
51+
const Email = () => {
52+
return <Section>
53+
<Text style={{ color: "#eee", textAlign: "center" }}>Hello</Text>
54+
<Hr />
55+
<Text style={{ color: "#eee", textAlign: "center" }}>world</Text>
56+
</Section>;
57+
};
58+
'>
4759
```jsx
48-
import { Hr } from "@react-email/components";
60+
import { Hr, Heading, Text, Section } from "@react-email/components";
4961

5062
const Email = () => {
51-
return <Hr />;
63+
return <Section>
64+
<Text style={{ color: "#eee", textAlign: "center" }}>Hello</Text>
65+
<Hr />
66+
<Text style={{ color: "#eee", textAlign: "center" }}>world</Text>
67+
</Section>;
5268
};
5369
```
70+
</ComponentPreview>
5471

5572
<Support/>

‎apps/docs/components/link.mdx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ description: "A hyperlink to web pages, email addresses, or anything else a URL
66
icon: "link"
77
---
88

9-
import Support from '/snippets/support.mdx'
9+
import Support from "/snippets/support.mdx";
10+
import { ComponentPreview } from "/snippets/component-preview.mdx";
1011

1112
## Install
1213

@@ -44,6 +45,14 @@ pnpm add @react-email/link -E
4445

4546
Add the component to your email template. Include styles where needed.
4647

48+
<ComponentPreview code='
49+
import { Link } from "@react-email/components";
50+
51+
const Email = () => {
52+
return <Link href="https://example.com">Example</Link>;
53+
};
54+
'>
55+
4756
```jsx
4857
import { Link } from "@react-email/components";
4958

@@ -52,6 +61,8 @@ const Email = () => {
5261
};
5362
```
5463

64+
</ComponentPreview>
65+
5566
## Props
5667

5768
<ResponseField name="href" type="string" required>
@@ -62,4 +73,4 @@ const Email = () => {
6273
Specify the target attribute for the button link
6374
</ResponseField>
6475

65-
<Support/>
76+
<Support />

‎apps/docs/components/markdown.mdx

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ icon: "file-code"
77
---
88

99
import Support from '/snippets/support.mdx'
10+
import { ComponentPreview } from '/snippets/component-preview.mdx'
1011

1112
## Install
1213

@@ -44,6 +45,35 @@ pnpm add @react-email/markdown -E
4445

4546
Add the component to your email template. Include styles where needed.
4647

48+
<ComponentPreview code='
49+
import { Markdown, Html } from "@react-email/components";
50+
51+
const Email = () => {
52+
return (
53+
<Html lang="en" dir="ltr">
54+
<Markdown
55+
markdownCustomStyles={{
56+
h1: { color: "cyan" },
57+
h2: { color: "blue" },
58+
codeInline: { background: "grey" },
59+
}}
60+
markdownContainerStyles={{
61+
padding: "12px",
62+
border: "solid 1px #eee",
63+
}}
64+
>{`# Hello, World!`}</Markdown>
65+
66+
{/* OR */}
67+
68+
<Markdown markdownCustomStyles={{
69+
h1: {
70+
color: "#eee"
71+
}
72+
}} children={`# This is a ~~strikethrough~~`} />
73+
</Html>
74+
);
75+
};
76+
'>
4777
```jsx
4878
import { Markdown, Html } from "@react-email/components";
4979

@@ -52,23 +82,28 @@ const Email = () => {
5282
<Html lang="en" dir="ltr">
5383
<Markdown
5484
markdownCustomStyles={{
55-
h1: { color: "red" },
85+
h1: { color: "cyan" },
5686
h2: { color: "blue" },
5787
codeInline: { background: "grey" },
5888
}}
5989
markdownContainerStyles={{
6090
padding: "12px",
61-
border: "solid 1px black",
91+
border: "solid 1px #eee",
6292
}}
6393
>{`# Hello, World!`}</Markdown>
6494

6595
{/* OR */}
6696

67-
<Markdown children={`# This is a ~~strikethrough~~`} />
97+
<Markdown markdownCustomStyles={{
98+
h1: {
99+
color: "#eee"
100+
}
101+
}} children={`# This is a ~~strikethrough~~`} />
68102
</Html>
69103
);
70104
};
71105
```
106+
</ComponentPreview>
72107

73108
## Props
74109

‎apps/docs/components/row.mdx

Lines changed: 79 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ description: "Display a row that separates content areas horizontally in your em
66
icon: "table-rows"
77
---
88

9-
import Support from '/snippets/support.mdx'
9+
import Support from "/snippets/support.mdx";
10+
import { ComponentPreview } from "/snippets/component-preview.mdx";
1011

1112
## Install
1213

@@ -44,24 +45,94 @@ pnpm add @react-email/row -E
4445

4546
Add the component to your email template. Include styles where needed.
4647

48+
<ComponentPreview code='
49+
import { Row, Column, Section } from "@react-email/components";
50+
51+
const Email = () => {
52+
return (
53+
<Section>
54+
<Row
55+
style={{
56+
height: "33.333vh"
57+
}} >
58+
<Column
59+
style={{
60+
textAlign: "center",
61+
backgroundColor: "#ff7b6b",
62+
}} >
63+
A
64+
</Column>
65+
</Row>
66+
<Row
67+
style={{
68+
height: "33.333vh"
69+
}} >
70+
<Column
71+
style={{
72+
textAlign: "center",
73+
backgroundColor: "#78ff69",
74+
}} >
75+
B
76+
</Column>
77+
</Row>
78+
<Row
79+
style={{
80+
height: "33.333vh"
81+
}} >
82+
<Column
83+
style={{
84+
textAlign: "center",
85+
backgroundColor: "#6482fa",
86+
}} >
87+
C
88+
</Column>
89+
</Row>
90+
</Section>
91+
);
92+
};
93+
'>
94+
4795
```jsx
4896
import { Row, Column, Section } from "@react-email/components";
4997

5098
const Email = () => {
5199
return (
52100
<Section>
53-
<Row>
54-
<Column>A</Column>
101+
<Row style={{ height: "33.333vh" }}>
102+
<Column
103+
style={{
104+
textAlign: "center",
105+
backgroundColor: "#ff7b6b",
106+
}}
107+
>
108+
A
109+
</Column>
55110
</Row>
56-
<Row>
57-
<Column>B</Column>
111+
<Row style={{ height: "33.333vh" }}>
112+
<Column
113+
style={{
114+
textAlign: "center",
115+
backgroundColor: "#78ff69",
116+
}}
117+
>
118+
B
119+
</Column>
58120
</Row>
59-
<Row>
60-
<Column>C</Column>
121+
<Row style={{ height: "33.333vh" }}>
122+
<Column
123+
style={{
124+
textAlign: "center",
125+
backgroundColor: "#6482fa",
126+
}}
127+
>
128+
C
129+
</Column>
61130
</Row>
62131
</Section>
63132
);
64133
};
65134
```
66135

67-
<Support/>
136+
</ComponentPreview>
137+
138+
<Support />

0 commit comments

Comments
 (0)