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 ( + + {isComposing ? ( + + + + + + + + + + ) : ( + setIsComposing(true)} + > + + + Escreva um comunicado para sua turma + + + )} + + ); +} + +export default PublishAnnouncementCard; diff --git a/src/components/PublishAnnouncementCard/styles.js b/src/components/PublishAnnouncementCard/styles.js new file mode 100644 index 0000000..282cd23 --- /dev/null +++ b/src/components/PublishAnnouncementCard/styles.js @@ -0,0 +1,42 @@ +// ========== 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', + ':hover': { + color: '#32A041', + }, +}; + +const mobileCard = {}; + +const mobile = { + publishAnnouncement: mobilePublishAnnouncement, + card: mobileCard, +}; + +// ========== Unset ========== + +const unset = { + publishAnnouncement: null, + card: null, +}; + +const styles = { desktop, mobile, unset }; +export default styles; diff --git a/src/screens/professor/Classroom/AnnouncementsTab/index.js b/src/screens/professor/Classroom/AnnouncementsTab/index.js index 4ca8c01..1154538 100644 --- a/src/screens/professor/Classroom/AnnouncementsTab/index.js +++ b/src/screens/professor/Classroom/AnnouncementsTab/index.js @@ -3,7 +3,6 @@ import { Card, Container, Grid, - Link, Skeleton, Stack, Typography, @@ -13,8 +12,16 @@ import AnnouncementCard from '../../../../components/AnnouncementCard'; import styles from './styles'; import jitsiLogo from '../../../../assets/jitsi.svg'; import { createArrayFrom1ToN } from '../../../../utils/createArrayFrom1ToN'; +import PublishAnnouncementCard from '../../../../components/PublishAnnouncementCard'; +import { useState } from 'react'; -function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) { +function AnnouncementsTab({ + layoutType, + announcementsTabData, + classroom, + user, +}) { + const [composingTextValue, setComposingTextValue] = useState(''); const { container, emptyStateContainer } = styles[layoutType]; const layoutResolver = (state, layoutType) => { @@ -112,6 +119,12 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) { direction="row" gap="30px" > + setComposingTextValue(e.target.value)} + /> {announcementsTabData.announcements.length !== 0 ? ( announcementsTabData.announcements.map(announcement => ( + setComposingTextValue(e.target.value)} + /> {announcementsTabData.announcements.length !== 0 ? ( announcementsTabData.announcements.map(announcement => ( ); diff --git a/src/utils/mocks/responses.js b/src/utils/mocks/responses.js index b3644af..d864fda 100644 --- a/src/utils/mocks/responses.js +++ b/src/utils/mocks/responses.js @@ -674,10 +674,11 @@ const professorUser = { email: 'carlos.junior@ifmg.edu.br', password: '#carlos1234', // TODO: Remove this! firstName: 'Carlos', - lastName: 'Severiano', + lastName: 'Alexandre Silva', token: 'xkhfb9458hnsdfsi9q8345bsdf9b834yr', phone: '31111111111', - avatar: 'https://i.pravatar.cc/300?img=61', + avatar: + 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80', course: 0, termsAgreed: true, year: 2018,