diff options
author | Leonardo Murça <106257713+leomurca@users.noreply.github.com> | 2023-02-07 20:40:41 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-02-07 20:40:41 -0300 |
commit | 8eca8b79ce4bfc40f8416309cbcfe397ed935ec4 (patch) | |
tree | ca4152122b67605e76f7a53ed1a14402255b23aa /src/components/PublishAnnouncementCard/index.js | |
parent | e3de3c8e5fe06f7d14b2dc99a8b6aadc3b9bf18a (diff) | |
parent | c1f1286c86a47b87abcca55cbd0177d2a9c92fcd (diff) |
Feature/professor classroom
Diffstat (limited to 'src/components/PublishAnnouncementCard/index.js')
-rw-r--r-- | src/components/PublishAnnouncementCard/index.js | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/PublishAnnouncementCard/index.js b/src/components/PublishAnnouncementCard/index.js new file mode 100644 index 0000000..67501b2 --- /dev/null +++ b/src/components/PublishAnnouncementCard/index.js @@ -0,0 +1,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; |