2 files changed, 111 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;
diff --git a/src/components/PublishAnnouncementCard/styles.js b/src/components/PublishAnnouncementCard/styles.js
new file mode 100644
index 0000000..4bc58fd
--- /dev/null
+++ b/src/components/PublishAnnouncementCard/styles.js
@@ -0,0 +1,47 @@
+// ========== Desktop ==========
+const desktopCard = {
+  width: '100%',
+  padding: '20px',
+};
+
+const desktopPublishAnnouncement = {
+  cursor: 'pointer',
+  ':hover': {
+    color: '#32A041',
+  },
+};
+
+const desktop = {
+  publishAnnouncement: desktopPublishAnnouncement,
+  card: desktopCard,
+};
+
+// ========== Mobile ==========
+const mobilePublishAnnouncement = {
+  cursor: 'pointer',
+  padding: '10px',
+  width: '100%',
+  ':hover': {
+    color: '#32A041',
+  },
+};
+
+const mobileCard = {
+  width: '100%',
+  padding: '10px ',
+};
+
+const mobile = {
+  publishAnnouncement: mobilePublishAnnouncement,
+  card: mobileCard,
+};
+
+// ========== Unset ==========
+
+const unset = {
+  publishAnnouncement: null,
+  card: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;