Skip to content

Commit b5b5663

Browse files
gabrielmferncubic-dev-ai[bot]
gabrielmfern
and
cubic-dev-ai[bot]
authored
fix(web): copy-paste component compatibility issues (#2681)
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
1 parent 6420a3f commit b5b5663

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+730
-767
lines changed

‎apps/web/components/article-with-multiple-authors/inline-styles.tsx‎

Lines changed: 57 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Column,
23
Heading,
34
Hr,
45
Img,
@@ -7,10 +8,11 @@ import {
78
Section,
89
Text,
910
} from '@react-email/components';
11+
import { Fragment } from 'react/jsx-runtime';
1012
import { Layout } from '../_components/layout';
1113

1214
export const component = (
13-
<Row>
15+
<Section>
1416
<Hr
1517
style={{
1618
borderColor: 'rgb(209,213,219) !important',
@@ -32,19 +34,20 @@ export const component = (
3234
imgSrc: '/static/steve-wozniak.jpg',
3335
showDivider: false,
3436
},
35-
].map((author, index) => (
36-
<>
37-
<Section
37+
].map((author) => (
38+
<Fragment key={author.name}>
39+
<Row
3840
align="left"
39-
key={index}
40-
style={{ marginTop: '16px', maxWidth: '288px' }}
41+
width="288"
42+
style={{ marginTop: '16px', width: '288px' }}
4143
>
42-
<Section
44+
<Column
45+
width="48"
46+
height="48"
4347
style={{
44-
display: 'inline-block',
45-
marginTop: '5px',
46-
maxHeight: '48px',
47-
maxWidth: '48px',
48+
paddingTop: '5px',
49+
height: '48px',
50+
width: '48px',
4851
textAlign: 'left',
4952
}}
5053
>
@@ -60,12 +63,12 @@ export const component = (
6063
}}
6164
width={48}
6265
/>
63-
</Section>
64-
<Section
66+
</Column>
67+
<Column
68+
width="100%"
6569
style={{
66-
display: 'inline-block',
67-
marginLeft: '18px',
68-
maxWidth: '120px',
70+
paddingLeft: '18px',
71+
width: '100%',
6972
textAlign: 'left',
7073
verticalAlign: 'top',
7174
}}
@@ -93,41 +96,42 @@ export const component = (
9396
>
9497
{author.title}
9598
</Text>
96-
<Section style={{ marginTop: '4px' }}>
97-
<Link
98-
href="#"
99-
style={{
100-
display: 'inline-flex',
101-
height: '12px',
102-
width: '12px',
103-
}}
104-
>
105-
<Img
106-
alt="X"
107-
height={12}
108-
src="/static/x-icon.png"
109-
width={12}
110-
/>
111-
</Link>
112-
<Link
113-
href="#"
114-
style={{
115-
display: 'inline-flex',
116-
height: '12px',
117-
marginLeft: '8px',
118-
width: '12px',
119-
}}
120-
>
121-
<Img
122-
alt="LinkedIn"
123-
height={12}
124-
src="/static/in-icon.png"
125-
width={12}
126-
/>
127-
</Link>
128-
</Section>
129-
</Section>
130-
</Section>
99+
<Row width={undefined} style={{ paddingTop: '8px' }} align="left">
100+
<Column width="12" height="12">
101+
<Link
102+
href="#"
103+
style={{
104+
height: '12px',
105+
width: '12px',
106+
}}
107+
>
108+
<Img
109+
alt="X"
110+
height={12}
111+
src="/static/x-icon.png"
112+
width={12}
113+
/>
114+
</Link>
115+
</Column>
116+
<Column width="12" height="12" style={{ paddingLeft: 8 }}>
117+
<Link
118+
href="#"
119+
style={{
120+
height: '12px',
121+
width: '12px',
122+
}}
123+
>
124+
<Img
125+
alt="LinkedIn"
126+
height={12}
127+
src="/static/in-icon.png"
128+
width={12}
129+
/>
130+
</Link>
131+
</Column>
132+
</Row>
133+
</Column>
134+
</Row>
131135
{author.showDivider ? (
132136
<Hr
133137
style={{
@@ -141,10 +145,10 @@ export const component = (
141145
}}
142146
/>
143147
) : null}
144-
</>
148+
</Fragment>
145149
))}
146150
</Section>
147-
</Row>
151+
</Section>
148152
);
149153

150154
export default () => {

‎apps/web/components/article-with-multiple-authors/tailwind.tsx‎

Lines changed: 67 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Column,
23
Heading,
34
Hr,
45
Img,
@@ -7,80 +8,90 @@ import {
78
Section,
89
Text,
910
} from '@react-email/components';
11+
import { Fragment } from 'react/jsx-runtime';
1012
import { Layout } from '../_components/layout';
1113

1214
export const component = (
13-
<Row>
15+
<Section>
1416
<Hr className="!border-gray-300 mt-[16px] mb-[0px]" />
15-
<Section>
16-
{[
17-
{
18-
name: 'Steve Jobs',
19-
title: 'Co-Founder & CEO',
20-
imgSrc: '/static/steve-jobs.jpg',
21-
showDivider: true,
22-
},
23-
{
24-
name: 'Steve Wozniak',
25-
title: 'Co-Founder & CTO',
26-
imgSrc: '/static/steve-wozniak.jpg',
27-
showDivider: false,
28-
},
29-
].map((author, index) => (
30-
<>
31-
<Section align="left" className="mt-[16px] max-w-[288px]" key={index}>
32-
<Section className="mt-[5px] inline-block max-h-[48px] max-w-[48px] text-left">
33-
<Img
34-
alt={author.name}
35-
className="block rounded-full object-cover object-center"
36-
height={48}
37-
src={author.imgSrc}
38-
width={48}
39-
/>
40-
</Section>
41-
<Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
42-
<Heading
43-
as="h3"
44-
className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
45-
>
46-
{author.name}
47-
</Heading>
48-
<Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
49-
{author.title}
50-
</Text>
51-
<Section className="mt-[4px]">
52-
<Link className="inline-flex h-[12px] w-[12px]" href="#">
17+
{[
18+
{
19+
name: 'Steve Jobs',
20+
title: 'Co-Founder & CEO',
21+
imgSrc: '/static/steve-jobs.jpg',
22+
showDivider: true,
23+
},
24+
{
25+
name: 'Steve Wozniak',
26+
title: 'Co-Founder & CTO',
27+
imgSrc: '/static/steve-wozniak.jpg',
28+
showDivider: false,
29+
},
30+
].map((author) => (
31+
<Fragment key={author.name}>
32+
<Row align="left" width="288" className="pt-[16px] w-[288px]">
33+
<Column
34+
width="48"
35+
height="48"
36+
align="left"
37+
className="pt-[5px] h-[48px] w-[48px]"
38+
>
39+
<Img
40+
alt={author.name}
41+
className="block rounded-full object-cover object-center"
42+
height={48}
43+
src={author.imgSrc}
44+
width={48}
45+
/>
46+
</Column>
47+
<Column
48+
width="100%"
49+
className="pl-[18px] w-full"
50+
align="left"
51+
valign="top"
52+
>
53+
<Heading
54+
as="h3"
55+
className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
56+
>
57+
{author.name}
58+
</Heading>
59+
<Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
60+
{author.title}
61+
</Text>
62+
<Row width={undefined} className="pt-[8px]" align="left">
63+
<Column width="12" height="12">
64+
<Link className="h-[12px] w-[12px]" href="#">
5365
<Img
5466
alt="X"
5567
height={12}
5668
src="/static/x-icon.png"
5769
width={12}
5870
/>
5971
</Link>
60-
<Link
61-
className="ml-[8px] inline-flex h-[12px] w-[12px]"
62-
href="#"
63-
>
72+
</Column>
73+
<Column className="pl-[8px]" width="12" height="12">
74+
<Link className="h-[12px] w-[12px]" href="#">
6475
<Img
6576
alt="LinkedIn"
6677
height={12}
6778
src="/static/in-icon.png"
6879
width={12}
6980
/>
7081
</Link>
71-
</Section>
72-
</Section>
73-
</Section>
74-
{author.showDivider ? (
75-
<Hr
76-
className="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
77-
style={{ float: 'left' }}
78-
/>
79-
) : null}
80-
</>
81-
))}
82-
</Section>
83-
</Row>
82+
</Column>
83+
</Row>
84+
</Column>
85+
</Row>
86+
{author.showDivider ? (
87+
<Hr
88+
className="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
89+
style={{ float: 'left' }}
90+
/>
91+
) : null}
92+
</Fragment>
93+
))}
94+
</Section>
8495
);
8596

8697
export default () => {

0 commit comments

Comments
 (0)