forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
EmailContent.tsx
187 lines (185 loc) · 6.1 KB
/
EmailContent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
import * as React from 'react';
import Box from '@mui/joy/Box';
import Chip from '@mui/joy/Chip';
import Card from '@mui/joy/Card';
import CardOverflow from '@mui/joy/CardOverflow';
import Sheet from '@mui/joy/Sheet';
import Typography from '@mui/joy/Typography';
import Button from '@mui/joy/Button';
import IconButton from '@mui/joy/IconButton';
import AspectRatio from '@mui/joy/AspectRatio';
import Divider from '@mui/joy/Divider';
import Avatar from '@mui/joy/Avatar';
// Icons import
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import ForwardToInboxRoundedIcon from '@mui/icons-material/ForwardToInboxRounded';
import FolderIcon from '@mui/icons-material/Folder';
export default function EmailContent() {
return (
<Sheet
variant="outlined"
sx={{
minHeight: 500,
borderRadius: 'sm',
p: 2,
mb: 3,
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
gap: 2,
}}
>
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Avatar
src="https://i.pravatar.cc/40?img=3"
srcSet="https://i.pravatar.cc/80?img=3"
sx={{ borderRadius: 'sm' }}
/>
<Box sx={{ ml: 2 }}>
<Typography level="body2" textColor="text.primary" mb={0.5}>
Alex Jonnold
</Typography>
<Typography level="body3" textColor="text.tertiary">
21 Oct 2022
</Typography>
</Box>
</Box>
<Box
sx={{ display: 'flex', height: '32px', flexDirection: 'row', gap: 1.5 }}
>
<Button variant="outlined" color="neutral" size="sm">
Reply
</Button>
<IconButton size="sm" variant="outlined" color="neutral">
<ForwardToInboxRoundedIcon />
</IconButton>
<IconButton size="sm" variant="outlined" color="neutral">
<DeleteRoundedIcon />
</IconButton>
</Box>
</Box>
<Divider sx={{ mt: 2 }} />
<Box
sx={{ py: 2, display: 'flex', flexDirection: 'column', alignItems: 'start' }}
>
<Typography level="h5" textColor="text.primary">
Details for our Yosemite Park hike
</Typography>
<Box
sx={{
mt: 1,
display: 'flex',
alignItems: 'center',
gap: 1,
flexWrap: 'wrap',
}}
>
<Box>
<Typography
component="span"
level="body2"
sx={{ mr: 1, display: 'inline-block' }}
>
From
</Typography>
<Chip size="sm" variant="outlined" onClick={() => {}}>
alex.jonnold@hike.com
</Chip>
</Box>
<Box>
<Typography
component="span"
level="body2"
sx={{ mr: 1, display: 'inline-block' }}
>
to
</Typography>
<Chip size="sm" variant="outlined" onClick={() => {}}>
steve@mail.com
</Chip>
</Box>
</Box>
</Box>
<Divider />
<Typography level="body2" mt={2} mb={2}>
Hello, my friend!
<br />
<br />
So, it seems we are getting there! Our trip is finally here. As you know, I
love Yosemite National Park, a lot of great climbers and explorers have made
history there, so I'm very excited to bring you with me in this journey.
<br />
<br />
There are plenty of amazing things to see there, from internationally
recognized granite cliffs, waterfalls, clear streams, giant sequoia groves,
lakes, mountains, meadows, glaciers, and a lot o biological diversity. It is
amazing that almost 95 percent of the park is designated wilderness. Yosemite
is one of the largest and least fragmented habitat blocks in the Serra
Nevada, and the park supports a fantastic diversity of plants and animals.
<br />
<br />
I really hope you love coming along with me, we will have an awesome time!
I'm attaching a few pics I took on the last time I went there-get
excited!
<br />
<br />
See you soon, Alex Jonnold
</Typography>
<Divider />
<Typography fontWeight="md" fontSize="sm" mt={2} mb={2}>
Attachments
</Typography>
<Box
sx={(theme) => ({
display: 'flex',
flexWrap: 'wrap',
gap: 2,
'& > div': {
boxShadow: 'none',
'--Card-padding': '0px',
'--Card-radius': theme.vars.radius.sm,
},
})}
>
<Card variant="outlined">
<AspectRatio ratio="1" sx={{ minWidth: 80 }}>
<img
src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&h=80"
srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&h=160 2x"
alt="Yosemite National Park"
/>
</AspectRatio>
</Card>
<Card variant="outlined">
<AspectRatio ratio="1" sx={{ minWidth: 80 }}>
<img
src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&h=80"
srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&h=160 2x"
alt="Yosemite National Park"
/>
</AspectRatio>
</Card>
<Card variant="outlined" row>
<CardOverflow>
<AspectRatio ratio="1" sx={{ minWidth: 80 }}>
<Box>
<FolderIcon />
</Box>
</AspectRatio>
</CardOverflow>
<Box sx={{ p: { xs: 1, sm: 2 } }}>
<Typography level="body2" color="primary">
videos-hike.zip
</Typography>
<Typography level="body3">100 MB</Typography>
</Box>
</Card>
</Box>
</Sheet>
);
}