42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import React, { ChangeEvent, FC } from 'react';
|
|
import Paper from '@mui/material/Paper';
|
|
import Typography from '@mui/material/Typography';
|
|
import Box from '@mui/material/Box';
|
|
import TextField from '@mui/material/TextField';
|
|
|
|
export interface EmailValue {
|
|
to: string;
|
|
content: string;
|
|
subject: string;
|
|
}
|
|
|
|
export const EmailSender: FC<{
|
|
value: EmailValue; onChange: (value: EmailValue) => void
|
|
}> = ({ value, onChange }) => {
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
onChange({
|
|
...value,
|
|
[e.target.name]: e.target.value
|
|
});
|
|
};
|
|
return (
|
|
<Paper sx={{p: 2, mb:2}}>
|
|
<Typography variant="subtitle1" sx={{mb: 1}}>Email Sender</Typography>
|
|
<Box>
|
|
<TextField label="Send To" placeholder="Please enter your email address" type="email"
|
|
value={value.to} name="to" fullWidth sx={{mb: 4}}
|
|
onChange={handleChange}
|
|
/>
|
|
<TextField label="Subject" placeholder="Please enter your email subject"
|
|
value={value.subject} name="subject" fullWidth sx={{mb: 4}}
|
|
onChange={handleChange}
|
|
/>
|
|
<TextField label="Content" placeholder="Please enter your email content"
|
|
value={value.content} name="content" fullWidth sx={{mb: 4}}
|
|
onChange={handleChange} maxRows={8} minRows={3} multiline
|
|
/>
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
};
|