Add appointment slots card

src/screens/Classroom/AnnouncementsTab/index.js

@@ -6,6 +6,7 @@ import {
   Link,
   Skeleton,
   Stack,
+  Typography,
 } from '@mui/material';
 import AnnouncementCard from '../../../components/AnnouncementCard';
 import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
@@ -13,13 +14,13 @@ import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
 import styles from './styles';
 import jitsiLogo from '../../../assets/jitsi.svg';
 
-function AnnouncementsTab({ layoutType, announcementsTabData }) {
+function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
   const { container } = styles[layoutType];
   if (layoutType === 'desktop') {
     return announcementsTabData === null ? (
       <Grid sx={container} container spacing={2}>
         <Grid sx={{ padding: '0 !important' }} item xs={4}>
-          {createArrayFrom1ToN(2).map(i => (
+          {createArrayFrom1ToN(3).map(i => (
             <Skeleton
               key={i}
               variant="rectangular"
@@ -86,6 +87,20 @@ function AnnouncementsTab({ layoutType, announcementsTabData }) {
                 ))}
               </Stack>
             </Card>
+            <Card
+              sx={{ width: '100%', padding: '20px' }}
+              elevation={4}
+              variant="elevation"
+            >
+              <Stack justifyContent="flex-start" spacing={1}>
+                <h3 style={{ fontWeight: 500 }}>Horários de Atendimento</h3>
+                {classroom.appointmentSlots.map((appts, index) => (
+                  <Typography key={index} variant="body1">
+                    {appts.weekDay}, {appts.start}h - {appts.end}h
+                  </Typography>
+                ))}
+              </Stack>
+            </Card>
           </Stack>
         </Grid>
         <Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
@@ -117,7 +132,7 @@ function AnnouncementsTab({ layoutType, announcementsTabData }) {
         gap="30px"
         sx={{ marginTop: '30px' }}
       >
-        {createArrayFrom1ToN(2).map(i => (
+        {createArrayFrom1ToN(3).map(i => (
           <Skeleton
             key={i}
             variant="rectangular"
@@ -187,6 +202,20 @@ function AnnouncementsTab({ layoutType, announcementsTabData }) {
               ))}
             </Stack>
           </Card>
+          <Card
+            sx={{ width: '100%', padding: '20px' }}
+            elevation={4}
+            variant="elevation"
+          >
+            <Stack justifyContent="flex-start" spacing={1}>
+              <h3 style={{ fontWeight: 500 }}>Horários de Atendimento</h3>
+              {classroom.appointmentSlots.map((appts, index) => (
+                <Typography key={index} variant="body1">
+                  {appts.weekDay}, {appts.start}h - {appts.end}h
+                </Typography>
+              ))}
+            </Stack>
+          </Card>
         </Stack>
         <Stack
           sx={{ width: '100%' }}

src/screens/Classroom/View.js

@@ -24,6 +24,7 @@ function View({
       <AnnouncementsTab
         layoutType={layoutType}
         announcementsTabData={announcementsTabData}
+        classroom={classroom && classroom}
       />
     </Container>
   );

src/services/mocks.js

@@ -12,6 +12,10 @@ const allClassrooms = [
           'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
       },
     ],
+    appointmentSlots: [
+      { weekDay: 'Quarta-feira', start: '10:00', end: '11:40' },
+      { weekDay: 'Sexta-feira', start: '10:00', end: '11:40' },
+    ],
   },
   {
     id: '123',
@@ -31,6 +35,10 @@ const allClassrooms = [
         avatar: '/assets/alex.jpg',
       },
     ],
+    appointmentSlots: [
+      { weekDay: 'Segunda-feira', start: '09:00', end: '10:40' },
+      { weekDay: 'Quinta-feira', start: '08:00', end: '09:00' },
+    ],
   },
   {
     id: '666',
@@ -45,6 +53,10 @@ const allClassrooms = [
           'https://lh3.googleusercontent.com/a-/AOh14GhwNeQ0h2eKl2WXGuwyDzvLWtrvyrG2kJtZ7A1EBw=s75-c',
       },
     ],
+    appointmentSlots: [
+      { weekDay: 'Segunda-feira', start: '09:00', end: '10:40' },
+      { weekDay: 'Terça-feira', start: '08:00', end: '09:00' },
+    ],
   },
   {
     id: '765',
@@ -58,6 +70,10 @@ const allClassrooms = [
         avatar: '/assets/alex.jpg',
       },
     ],
+    appointmentSlots: [
+      { weekDay: 'Sexta-feira', start: '20:00', end: '21:00' },
+      { weekDay: 'Terça-feira', start: '19:00', end: '20:10' },
+    ],
   },
   {
     id: '333',
@@ -72,6 +88,10 @@ const allClassrooms = [
           'https://lh3.googleusercontent.com/a-/AOh14GgvfrD--cl25V_3UOAR93sN_jKdYNJ9PXhUH2zXhQ=s75-c',
       },
     ],
+    appointmentSlots: [
+      { weekDay: 'Terça-feira', start: '08:00', end: '09:20' },
+      { weekDay: 'Quarta-feira', start: '11:00', end: '12:20' },
+    ],
   },
 ];