blob: 67501b2a7804d2368a43cc6c2e4142162742561c (
plain)
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
|
import {
Avatar,
Button,
Card,
Stack,
TextField,
Typography,
} from '@mui/material';
import { useState } from 'react';
import styles from './styles';
function PublishAnnouncementCard({ layoutType, user, value, onChange }) {
const [isComposing, setIsComposing] = useState(false);
const { card, publishAnnouncement } = styles[layoutType];
return (
<Card sx={card} elevation={4} variant="elevation">
{isComposing ? (
<Stack
sx={publishAnnouncement}
alignItems="end"
direction="column"
spacing={2}
>
<TextField
value={value}
onChange={onChange}
sx={{ width: '100%' }}
id="outlined-multiline-static"
label="Escreva um comunicado para sua turma"
autoFocus
multiline
minRows={4}
/>
<Stack direction="row" spacing={4}>
<Button onClick={() => setIsComposing(false)} variant="text">
Cancelar
</Button>
<Button onClick={() => console.log('clicked')} variant="contained">
Postar
</Button>
</Stack>
</Stack>
) : (
<Stack
sx={publishAnnouncement}
alignItems="center"
direction="row"
spacing={2}
onClick={() => setIsComposing(true)}
>
<Avatar alt={user.firstName} src={user.avatar} />
<Typography id="outlined-multiline-static" sx={{ width: '100%' }}>
Escreva um comunicado para sua turma
</Typography>
</Stack>
)}
</Card>
);
}
export default PublishAnnouncementCard;
|
