Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 1 | import React from 'react' |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame^] | 2 | import { makeStyles } from '@material-ui/core/styles'; |
| 3 | import { IconButton, InputBase, Paper } from '@material-ui/core' |
| 4 | import SendIcon from '@material-ui/icons/Send'; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 5 | |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame^] | 6 | const useStyles = makeStyles((theme) => ({ |
| 7 | root: { |
| 8 | margin: 16, |
| 9 | padding: '2px 4px', |
| 10 | display: 'flex', |
| 11 | alignItems: 'center', |
| 12 | borderRadius: 8 |
| 13 | }, |
| 14 | input: { |
| 15 | marginLeft: theme.spacing(1), |
| 16 | flex: 1, |
| 17 | }, |
| 18 | iconButton: { |
| 19 | padding: 10, |
| 20 | }, |
| 21 | divider: { |
| 22 | height: 28, |
| 23 | margin: 4, |
| 24 | }, |
| 25 | })); |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 26 | |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame^] | 27 | export default function SendMessageForm(props) { |
| 28 | const classes = useStyles(); |
| 29 | |
| 30 | const handleSubmit = e => { |
| 31 | e.preventDefault() |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 32 | } |
| 33 | |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame^] | 34 | return ( |
| 35 | <div className="send-message-form"> |
| 36 | <Paper component="form" |
| 37 | onSubmit={handleSubmit} |
| 38 | className="send-message-card" |
| 39 | className={classes.root}> |
| 40 | <InputBase |
| 41 | className={classes.input} |
| 42 | placeholder="Write something nice" |
| 43 | height="35" |
| 44 | /> |
| 45 | <IconButton type="submit" className={classes.iconButton} aria-label="search"> |
| 46 | <SendIcon /> |
| 47 | </IconButton> |
| 48 | </Paper> |
| 49 | </div> |
| 50 | ) |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 51 | } |