119 lines
4.0 KiB
TypeScript
119 lines
4.0 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import Box from '@mui/joy/Box';
|
||
|
|
import ModalClose from '@mui/joy/ModalClose';
|
||
|
|
import Button from '@mui/joy/Button';
|
||
|
|
import FormControl from '@mui/joy/FormControl';
|
||
|
|
import FormLabel from '@mui/joy/FormLabel';
|
||
|
|
import Textarea from '@mui/joy/Textarea';
|
||
|
|
import Sheet from '@mui/joy/Sheet';
|
||
|
|
import { IconButton, Input, Stack, Typography } from '@mui/joy';
|
||
|
|
|
||
|
|
import FormatColorTextRoundedIcon from '@mui/icons-material/FormatColorTextRounded';
|
||
|
|
import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
|
||
|
|
import InsertPhotoRoundedIcon from '@mui/icons-material/InsertPhotoRounded';
|
||
|
|
import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
|
||
|
|
|
||
|
|
interface WriteEmailProps {
|
||
|
|
open?: boolean;
|
||
|
|
onClose?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const WriteEmail = React.forwardRef<HTMLDivElement, WriteEmailProps>(
|
||
|
|
function WriteEmail({ open, onClose }, ref) {
|
||
|
|
return (
|
||
|
|
<Sheet
|
||
|
|
ref={ref}
|
||
|
|
sx={[
|
||
|
|
{
|
||
|
|
alignItems: 'center',
|
||
|
|
px: 1.5,
|
||
|
|
py: 1.5,
|
||
|
|
ml: 'auto',
|
||
|
|
width: { xs: '100dvw', md: 600 },
|
||
|
|
flexGrow: 1,
|
||
|
|
border: '1px solid',
|
||
|
|
borderRadius: '8px 8px 0 0',
|
||
|
|
backgroundColor: 'background.level1',
|
||
|
|
borderColor: 'neutral.outlinedBorder',
|
||
|
|
boxShadow: 'lg',
|
||
|
|
zIndex: 1000,
|
||
|
|
position: 'fixed',
|
||
|
|
bottom: 0,
|
||
|
|
right: 24,
|
||
|
|
transition: 'transform 0.3s ease',
|
||
|
|
},
|
||
|
|
open ? { transform: 'translateY(0)' } : { transform: 'translateY(100%)' },
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<Box sx={{ mb: 2 }}>
|
||
|
|
<Typography level="title-sm">New message</Typography>
|
||
|
|
<ModalClose id="close-icon" onClick={onClose} />
|
||
|
|
</Box>
|
||
|
|
<Box
|
||
|
|
sx={{ display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}
|
||
|
|
>
|
||
|
|
<FormControl>
|
||
|
|
<FormLabel>To</FormLabel>
|
||
|
|
<Input placeholder="email@email.com" aria-label="Message" />
|
||
|
|
</FormControl>
|
||
|
|
<FormControl>
|
||
|
|
<FormLabel>CC</FormLabel>
|
||
|
|
<Input placeholder="email@email.com" aria-label="Message" />
|
||
|
|
</FormControl>
|
||
|
|
<Input placeholder="Subject" aria-label="Message" />
|
||
|
|
<FormControl sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
|
|
<Textarea
|
||
|
|
placeholder="Type your message here…"
|
||
|
|
aria-label="Message"
|
||
|
|
minRows={8}
|
||
|
|
endDecorator={
|
||
|
|
<Stack
|
||
|
|
direction="row"
|
||
|
|
sx={{
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
flexGrow: 1,
|
||
|
|
py: 1,
|
||
|
|
pr: 1,
|
||
|
|
borderTop: '1px solid',
|
||
|
|
borderColor: 'divider',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<IconButton size="sm" variant="plain" color="neutral">
|
||
|
|
<FormatColorTextRoundedIcon />
|
||
|
|
</IconButton>
|
||
|
|
<IconButton size="sm" variant="plain" color="neutral">
|
||
|
|
<AttachFileRoundedIcon />
|
||
|
|
</IconButton>
|
||
|
|
<IconButton size="sm" variant="plain" color="neutral">
|
||
|
|
<InsertPhotoRoundedIcon />
|
||
|
|
</IconButton>
|
||
|
|
<IconButton size="sm" variant="plain" color="neutral">
|
||
|
|
<FormatListBulletedRoundedIcon />
|
||
|
|
</IconButton>
|
||
|
|
</div>
|
||
|
|
<Button
|
||
|
|
color="primary"
|
||
|
|
sx={{ borderRadius: 'sm' }}
|
||
|
|
onClick={onClose}
|
||
|
|
>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
}
|
||
|
|
sx={{
|
||
|
|
'& textarea:first-of-type': {
|
||
|
|
minHeight: 72,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</Box>
|
||
|
|
</Sheet>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
|
||
|
|
export default WriteEmail;
|