leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add idle view for PeopleTab in desktop layoutType

Browse source
This commit is contained in:
Leonardo Murça 2022-08-24 15:41:29 -03:00
parent d2feb08881
commit fdbb1bc412
1 changed files with 99 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/screens/Classroom/PeopleTab/index.js
View file

@ -1,4 +1,11 @@
import { Container, Skeleton, Stack } from '@mui/material';
import {
Avatar,
Container,
Link,
Skeleton,
Stack,
Typography,
} from '@mui/material';
import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
function PeopleTab({ layoutType, peopleTabData }) {
@ -60,7 +67,97 @@ function PeopleTab({ layoutType, peopleTabData }) {
</Container>
);
case 'idle':
return people.map(p => <p key={p.id}>{p.name}</p>);
return (
<Container
sx={{ marginTop: '50px', height: '100vh' }}
disableGutters
>
<Container sx={{ width: '90%' }} disableGutters>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h4"
>
Docentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'PROFESSOR')
.map(p => (
<Container
key={p.id}
sx={{
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '60px',
height: '60px',
marginRight: '15px',
}}
/>
<Typography variant="h5">{p.name}</Typography>
</Container>
))}
</Stack>
</Container>
<Container
sx={{ width: '90%', marginTop: '30px' }}
disableGutters
>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h4"
>
Discentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'STUDENT')
.map(p => (
<Container
key={p.id}
sx={{
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '60px',
height: '60px',
marginRight: '15px',
}}
/>
<Typography variant="h5">{p.name}</Typography>
</Container>
))}
</Stack>
</Container>
</Container>
);
case 'gone':
return null;
default: