Support multiple teacher on cards

This commit is contained in:
Leonardo Murça 2022-06-22 14:27:34 -03:00
parent 8b149806e8
commit 2f570e5989
2 changed files with 36 additions and 18 deletions

View file

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

View file

@ -16,7 +16,7 @@ const getClassrooms = userId =>
{ {
name: 'Carlos Alexandre Silva', name: 'Carlos Alexandre Silva',
avatar: 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: [ teachers: [
{ {
name: 'Míriam Lúcia Barbosa', 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',
// },
], ],
}, },
{ {