Skip to content

Commit b2142fc

Browse files
luxonautazenorochagraphite-app[bot]
authored and
gabrielmfern
committed
feat: add new components (#1989)
Co-authored-by: Zeno Rocha <[email protected]> Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
1 parent e8e19f1 commit b2142fc

File tree

17 files changed

+1338
-1
lines changed

17 files changed

+1338
-1
lines changed

‎apps/web/components/bento-grid/inline-styles.tsx

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import {
2+
Body,
3+
Column,
4+
Container,
5+
Head,
6+
Heading,
7+
Html,
8+
Img,
9+
Link,
10+
Preview,
11+
Row,
12+
Section,
13+
Text,
14+
} from '@react-email/components';
15+
import { Layout } from '../_components/layout';
16+
17+
export const component = (
18+
<Html>
19+
<Head />
20+
<Preview>Coffee Storage</Preview>
21+
<Body>
22+
<Container
23+
style={{
24+
backgroundColor: '#FFFFFF',
25+
borderRadius: '8px',
26+
margin: '0 auto',
27+
maxWidth: '900px',
28+
overflow: 'hidden',
29+
padding: '0',
30+
}}
31+
>
32+
<Section>
33+
<Row
34+
style={{
35+
backgroundColor: '#292524',
36+
borderCollapse: 'separate',
37+
borderSpacing: '24px',
38+
margin: '0',
39+
tableLayout: 'fixed',
40+
width: '100%',
41+
}}
42+
>
43+
<Column style={{ paddingLeft: '12px' }}>
44+
<Heading
45+
as="h1"
46+
style={{
47+
color: '#FFFFFF',
48+
fontSize: '28px',
49+
fontWeight: 'bold',
50+
margin: '0 0 10px 0',
51+
}}
52+
>
53+
Coffee Storage
54+
</Heading>
55+
<Text
56+
style={{
57+
color: '#ffffff99',
58+
fontSize: '14px',
59+
lineHeight: '20px',
60+
margin: 0,
61+
}}
62+
>
63+
Keep your coffee fresher for longer with innovative technology.
64+
</Text>
65+
<Link
66+
href="#"
67+
style={{
68+
color: '#ffffffcc',
69+
display: 'block',
70+
fontSize: '14px',
71+
fontWeight: '600',
72+
marginTop: '12px',
73+
textDecoration: 'none',
74+
}}
75+
>
76+
Shop now →
77+
</Link>
78+
</Column>
79+
<Column style={{ width: '42%', height: '250px' }}>
80+
<Img
81+
src="/static/coffee-bean-storage.jpg"
82+
alt="Coffee Bean Storage"
83+
style={{
84+
borderRadius: '4px',
85+
height: '100%',
86+
margin: '0 -6px 0 0',
87+
objectFit: 'cover',
88+
objectPosition: 'center',
89+
width: '100%',
90+
}}
91+
/>
92+
</Column>
93+
</Row>
94+
</Section>
95+
<Section
96+
style={{
97+
margin: '0 0 12px 0',
98+
}}
99+
>
100+
<Row
101+
style={{
102+
borderCollapse: 'separate',
103+
borderSpacing: '12px',
104+
tableLayout: 'fixed',
105+
width: '100%',
106+
}}
107+
>
108+
{[
109+
{
110+
imageUrl: '/static/atmos-vacuum-canister.jpg',
111+
altText: 'Auto-Sealing Vacuum Canister',
112+
title: 'Auto-Sealing Vacuum Canister',
113+
description:
114+
'A container that automatically creates an airtight seal with a button press.',
115+
linkUrl: '#',
116+
},
117+
{
118+
imageUrl: '/static/vacuum-canister-clear-glass-bundle.jpg',
119+
altText: '3-Pack Vacuum Containers',
120+
title: '3-Pack Vacuum Containers',
121+
description:
122+
'Keep your coffee fresher for longer with this set of high-performance vacuum containers.',
123+
linkUrl: '#',
124+
},
125+
].map((product) => (
126+
<Column
127+
key={product.title}
128+
style={{
129+
margin: '0 auto',
130+
maxWidth: '180px',
131+
}}
132+
>
133+
<Img
134+
src={product.imageUrl}
135+
alt={product.altText}
136+
style={{
137+
borderRadius: '4px',
138+
marginBottom: '18px',
139+
width: '100%',
140+
}}
141+
/>
142+
<div>
143+
<Heading
144+
as="h2"
145+
style={{
146+
fontSize: '14px',
147+
fontWeight: 'bold',
148+
margin: '0 0 8px 0',
149+
}}
150+
>
151+
{product.title}
152+
</Heading>
153+
<Text
154+
style={{
155+
color: '#6b7280',
156+
fontSize: '12px',
157+
lineHeight: '20px',
158+
margin: '0',
159+
paddingRight: '12px',
160+
}}
161+
>
162+
{product.description}
163+
</Text>
164+
</div>
165+
</Column>
166+
))}
167+
</Row>
168+
</Section>
169+
</Container>
170+
</Body>
171+
</Html>
172+
);
173+
174+
export default () => {
175+
return <Layout>{component}</Layout>;
176+
};

‎apps/web/components/bento-grid/tailwind.tsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import {
2+
Body,
3+
Column,
4+
Container,
5+
Head,
6+
Heading,
7+
Html,
8+
Img,
9+
Link,
10+
Preview,
11+
Row,
12+
Section,
13+
Text,
14+
} from '@react-email/components';
15+
import { Layout } from '../_components/layout';
16+
17+
export const component = (
18+
<Html>
19+
<Head />
20+
<Preview>Coffee Storage</Preview>
21+
<Body>
22+
<Container className="bg-white rounded-lg mx-auto max-w-[900px] overflow-hidden p-0">
23+
<Section>
24+
<Row className="bg-[#292524] border-separate border-spacing-[24px] m-0 table-fixed w-full">
25+
<Column className="pl-3">
26+
<Heading
27+
as="h1"
28+
className="text-white text-[28px] font-bold mb-[10px]"
29+
>
30+
Coffee Storage
31+
</Heading>
32+
<Text className="text-white/60 text-sm leading-[20px] m-0">
33+
Keep your coffee fresher for longer with innovative technology.
34+
</Text>
35+
<Link
36+
href="#"
37+
className="text-white/80 block text-sm font-semibold mt-3 no-underline"
38+
>
39+
Shop now →
40+
</Link>
41+
</Column>
42+
<Column className="w-[42%] h-[250px]">
43+
<Img
44+
src="/static/coffee-bean-storage.jpg"
45+
alt="Coffee Bean Storage"
46+
className="rounded h-full -mr-[6px] object-cover object-center w-full"
47+
/>
48+
</Column>
49+
</Row>
50+
</Section>
51+
<Section className="mb-6">
52+
<Row className="border-separate border-spacing-[12px] table-fixed w-full">
53+
{[
54+
{
55+
imageUrl: '/static/atmos-vacuum-canister.jpg',
56+
altText: 'Auto-Sealing Vacuum Canister',
57+
title: 'Auto-Sealing Vacuum Canister',
58+
description:
59+
'A container that automatically creates an airtight seal with a button press.',
60+
linkUrl: '#',
61+
},
62+
{
63+
imageUrl: '/static/vacuum-canister-clear-glass-bundle.jpg',
64+
altText: '3-Pack Vacuum Containers',
65+
title: '3-Pack Vacuum Containers',
66+
description:
67+
'Keep your coffee fresher for longer with this set of high-performance vacuum containers.',
68+
linkUrl: '#',
69+
},
70+
].map((product) => (
71+
<Column key={product.title} className="mx-auto max-w-[180px]">
72+
<Img
73+
src={product.imageUrl}
74+
alt={product.altText}
75+
className="rounded mb-[18px] w-full"
76+
/>
77+
<div>
78+
<Heading as="h2" className="text-sm font-bold mb-[8px]">
79+
{product.title}
80+
</Heading>
81+
<Text className="text-gray-500 text-xs leading-[20px] m-0 pr-3">
82+
{product.description}
83+
</Text>
84+
</div>
85+
</Column>
86+
))}
87+
</Row>
88+
</Section>
89+
</Container>
90+
</Body>
91+
</Html>
92+
);
93+
94+
export default () => {
95+
return <Layout>{component}</Layout>;
96+
};

0 commit comments

Comments
 (0)