Support multiple teacher on cards

src/components/ClassCard.js

@@ -6,6 +6,7 @@ import {
   Container,
   Avatar,
   Stack,
+  AvatarGroup,
 } from '@mui/material';
 
 function ClassCard({ abbreviation, title, color, teachers }) {
@@ -29,23 +30,31 @@ function ClassCard({ abbreviation, title, color, teachers }) {
           <Typography gutterBottom variant="h5" component="div">
             {title}
           </Typography>
-          {teachers.map(teacher => (
-            <Stack
-              key={teacher.name}
-              alignItems="center"
-              direction="row"
-              spacing={1}
+          <Stack alignItems="center" direction="row" spacing={1}>
+            <AvatarGroup total={teachers.length}>
+              {teachers.map(t => (
+                <Avatar
+                  key={t.name}
+                  alt={t.name}
+                  src={t.avatar}
+                  sx={{ width: 30, height: 30 }}
+                />
+              ))}
+            </AvatarGroup>
+            <Typography
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+              }}
+              variant="body2"
+              color="text.secondary"
             >
-              <Avatar
-                alt={teacher.name}
-                src={teacher.avatar}
-                sx={{ width: 30, height: 30 }}
-              />
-              <Typography variant="body2" color="text.secondary">
-                {teacher.name}
-              </Typography>
-            </Stack>
-          ))}
+              {teachers.map(t => t.name).join(',')}
+            </Typography>
+          </Stack>
         </CardContent>
       </CardActionArea>
     </Card>

src/context/user.js

@@ -16,7 +16,7 @@ const getClassrooms = userId =>
             {
               name: 'Carlos Alexandre Silva',
               avatar:
-                'https://lh3.googleusercontent.com/a-/AOh14GgmBInEbkv1D4FuLyz64phoyOfI4Y8kql8LYVy0_w=s75-c',
+                'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
             },
           ],
         },
@@ -27,8 +27,17 @@ const getClassrooms = userId =>
           teachers: [
             {
               name: 'Míriam Lúcia Barbosa',
-              avatar: '/assets/miriam.jpg',
+              avatar:
+                'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
             },
+            {
+              name: 'Alexandre Couto Cardoso',
+              avatar: '/assets/alex.jpg',
+            },
+            // {
+            //   name: 'Alexandre Couto Cardoso',
+            //   avatar: '/assets/alex.jpg',
+            // },
           ],
         },
         {