Skip to content

Commit 068bfed

Browse files
gabrielmferngabrielmfern
committed
use tailwind
1 parent 0073b2c commit 068bfed

File tree

2 files changed

+115
-148
lines changed

2 files changed

+115
-148
lines changed

‎apps/demo/emails/reviews/airbnb-review.tsx‎

Lines changed: 100 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import {
1010
Preview,
1111
Row,
1212
Section,
13+
Tailwind,
1314
Text,
1415
} from '@react-email/components';
15-
import { Tailwind } from '@react-email/tailwind';
16+
import tailwindConfig from '../tailwind.config';
1617

1718
interface AirbnbReviewEmailProps {
1819
authorName?: string;
@@ -35,162 +36,113 @@ export const AirbnbReviewEmail = ({
3536
<Html>
3637
<Head />
3738

38-
<Body style={main}>
39-
<Preview>{previewText}</Preview>
40-
<Container style={container}>
41-
<Section>
42-
<Img
43-
src={`${baseUrl}/static/airbnb-logo.png`}
44-
width="96"
45-
height="30"
46-
alt="Airbnb"
47-
/>
48-
</Section>
49-
<Section>
50-
<Img
51-
src={authorImage}
52-
width="96"
53-
height="96"
54-
alt={authorName}
55-
style={userImage}
56-
/>
57-
</Section>
58-
<Section style={{ paddingBottom: '20px' }}>
59-
<Row>
60-
<Text style={heading}>Here's what {authorName} wrote</Text>
61-
<Text style={review}>{reviewText}</Text>
62-
<Text style={paragraph}>
63-
Now that the review period is over, we’ve posted {authorName}
64-
’s review to your Airbnb profile.
65-
</Text>
66-
<Text style={{ ...paragraph, paddingBottom: '16px' }}>
67-
While it’s too late to write a review of your own, you can send
68-
your feedback to {authorName} using your Airbnb message thread.
69-
</Text>
70-
71-
<Button style={button} href="https://www.airbnb.com">
72-
Send My Feedback
73-
</Button>
74-
</Row>
75-
</Section>
76-
77-
<Hr style={hr} />
78-
79-
<Section>
80-
<Row>
81-
<Text style={{ ...paragraph, fontWeight: '700' }}>
82-
Common questions
83-
</Text>
84-
<Text>
85-
<Link href="https://www.airbnb.com" style={link}>
86-
How do reviews work?
87-
</Link>
88-
</Text>
89-
<Text>
90-
<Link href="https://www.airbnb.com" style={link}>
91-
How do star ratings work?
39+
<Tailwind config={tailwindConfig}>
40+
<Body className="bg-white font-airbnb">
41+
<Preview>{previewText}</Preview>
42+
<Container className="mx-auto py-5 pb-12 w-[580px] max-w-full">
43+
<Section>
44+
<Img
45+
src={`${baseUrl}/static/airbnb-logo.png`}
46+
width="96"
47+
height="30"
48+
alt="Airbnb"
49+
/>
50+
</Section>
51+
<Section>
52+
<Img
53+
src={authorImage}
54+
width="96"
55+
height="96"
56+
alt={authorName}
57+
className="mx-auto mb-4 rounded-full"
58+
/>
59+
</Section>
60+
<Section className="pb-5">
61+
<Row>
62+
<Text className="text-[32px] leading-[1.3] font-bold text-[#484848]">
63+
Here's what {authorName} wrote
64+
</Text>
65+
<Text className="text-lg leading-[1.4] text-[#484848] p-6 bg-[#f2f3f3] rounded">
66+
{reviewText}
67+
</Text>
68+
<Text className="text-lg leading-[1.4] text-[#484848]">
69+
Now that the review period is over, we've posted {authorName}
70+
's review to your Airbnb profile.
71+
</Text>
72+
<Text className="text-lg leading-[1.4] text-[#484848] pb-4">
73+
While it's too late to write a review of your own, you can
74+
send your feedback to {authorName} using your Airbnb message
75+
thread.
76+
</Text>
77+
78+
<Button
79+
className="bg-[#ff5a5f] rounded-sm text-white text-lg py-5 px-8 no-underline text-center block"
80+
href="https://www.airbnb.com"
81+
>
82+
Send My Feedback
83+
</Button>
84+
</Row>
85+
</Section>
86+
87+
<Hr className="border-[#cccccc] my-5" />
88+
89+
<Section>
90+
<Row>
91+
<Text className="text-lg leading-[1.4] text-[#484848] font-bold">
92+
Common questions
93+
</Text>
94+
<Text>
95+
<Link
96+
href="https://www.airbnb.com"
97+
className="text-lg leading-[1.4] text-[#ff5a5f] block"
98+
>
99+
How do reviews work?
100+
</Link>
101+
</Text>
102+
<Text>
103+
<Link
104+
href="https://www.airbnb.com"
105+
className="text-lg leading-[1.4] text-[#ff5a5f] block"
106+
>
107+
How do star ratings work?
108+
</Link>
109+
</Text>
110+
<Text>
111+
<Link
112+
href="https://www.airbnb.com"
113+
className="text-lg leading-[1.4] text-[#ff5a5f] block"
114+
>
115+
Can I leave a review after 14 days?
116+
</Link>
117+
</Text>
118+
<Hr className="border-[#cccccc] my-5" />
119+
<Text className="text-[#9ca299] text-sm mb-2.5">
120+
Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
121+
</Text>
122+
<Link
123+
href="https://www.airbnb.com"
124+
className="text-sm text-[#9ca299] underline"
125+
>
126+
Report unsafe behavior
92127
</Link>
93-
</Text>
94-
<Text>
95-
<Link href="https://www.airbnb.com" style={link}>
96-
Can I leave a review after 14 days?
97-
</Link>
98-
</Text>
99-
<Hr style={hr} />
100-
<Text style={footer}>
101-
Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
102-
</Text>
103-
<Link href="https://www.airbnb.com" style={reportLink}>
104-
Report unsafe behavior
105-
</Link>
106-
</Row>
107-
</Section>
108-
</Container>
109-
</Body>
128+
</Row>
129+
</Section>
130+
</Container>
131+
</Body>
132+
</Tailwind>
110133
</Html>
111134
);
112135
};
113136

114137
AirbnbReviewEmail.PreviewProps = {
115138
authorName: 'Alex',
116139
authorImage: `${baseUrl}/static/airbnb-review-user.jpg`,
117-
reviewText: `“Alan was a great guest! Easy communication, the apartment was left
140+
reviewText: `"Alan was a great guest! Easy communication, the apartment was left
118141
in great condition, very polite, and respectful of all house rules.
119-
He’s welcome back anytime and would easily recommend him to any
120-
host!”`,
142+
He's welcome back anytime and would easily recommend him to any
143+
host!"`,
121144
} as AirbnbReviewEmailProps;
122145

123-
export default AirbnbReviewEmail;
124-
125-
const main = {
126-
backgroundColor: '#ffffff',
127-
fontFamily:
128-
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
129-
};
130-
131-
const container = {
132-
margin: '0 auto',
133-
padding: '20px 0 48px',
134-
width: '580px',
135-
maxWidth: '100%',
136-
};
137-
138-
const userImage = {
139-
margin: '0 auto',
140-
marginBottom: '16px',
141-
borderRadius: '50%',
142-
};
143-
144-
const heading = {
145-
fontSize: '32px',
146-
lineHeight: '1.3',
147-
fontWeight: '700',
148-
color: '#484848',
149-
};
150-
151-
const paragraph = {
152-
fontSize: '18px',
153-
lineHeight: '1.4',
154-
color: '#484848',
155-
};
156-
157-
const review = {
158-
...paragraph,
159-
padding: '24px',
160-
backgroundColor: '#f2f3f3',
161-
borderRadius: '4px',
162-
};
163-
164-
const button = {
165-
backgroundColor: '#ff5a5f',
166-
borderRadius: '3px',
167-
color: '#fff',
168-
fontSize: '18px',
169-
padding: '19px 30px',
170-
textDecoration: 'none',
171-
textAlign: 'center' as const,
172-
display: 'block',
173-
};
174-
175-
const link = {
176-
...paragraph,
177-
color: '#ff5a5f',
178-
display: 'block',
179-
};
180-
181-
const reportLink = {
182-
fontSize: '14px',
183-
color: '#9ca299',
184-
textDecoration: 'underline',
185-
};
146+
AirbnbReviewEmail.tailwindConfig = tailwindConfig;
186147

187-
const hr = {
188-
borderColor: '#cccccc',
189-
margin: '20px 0',
190-
};
191-
192-
const footer = {
193-
color: '#9ca299',
194-
fontSize: '14px',
195-
marginBottom: '10px',
196-
};
148+
export default AirbnbReviewEmail;

‎apps/demo/emails/tailwind.config.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,19 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
22

33
export default {
44
presets: [pixelBasedPreset],
5+
theme: {
6+
fontFamily: {
7+
airbnb: [
8+
'-apple-system',
9+
'BlinkMacSystemFont',
10+
'Segoe UI',
11+
'Roboto',
12+
'Oxygen-Sans',
13+
'Ubuntu',
14+
'Cantarell',
15+
'Helvetica Neue',
16+
'sans-serif',
17+
],
18+
},
19+
},
520
} satisfies TailwindConfig;

0 commit comments

Comments
 (0)