diff options
Diffstat (limited to 'src/screens/professor/Classroom/Header/index.js')
-rw-r--r-- | src/screens/professor/Classroom/Header/index.js | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/src/screens/professor/Classroom/Header/index.js b/src/screens/professor/Classroom/Header/index.js new file mode 100644 index 0000000..e077313 --- /dev/null +++ b/src/screens/professor/Classroom/Header/index.js @@ -0,0 +1,62 @@ +import { + Avatar, + AvatarGroup, + Container, + Paper, + Skeleton, + Stack, + Tab, + Tabs, + Tooltip, + Typography, +} from '@mui/material'; +import { TAB_OPTIONS } from '../tabOptions'; +import styles from './styles'; + +function Header({ + layoutType, + classroom, + selectedTabOption, + onSelectTabOption, + isLoading, +}) { + const { title, paper, tabs, avatar, tooltip } = styles[layoutType]; + return classroom === null ? ( + <Skeleton variant="rectangular" width="100%" height={240} /> + ) : ( + <Container disableGutters> + <Paper sx={paper(classroom.color)} elevation={4} variant="elevation"> + <h1 style={title}>{classroom.name}</h1> + <Stack alignItems="center" direction="row" spacing={1}> + <AvatarGroup total={classroom.teachers.length}> + {classroom.teachers.map(t => ( + <Avatar key={t.name} alt={t.name} src={t.avatar} sx={avatar} /> + ))} + </AvatarGroup> + <Tooltip title={classroom.teachers.map(t => t.name).join(', ')}> + <Typography sx={tooltip} variant="body3" color="text.secondary"> + {classroom.teachers.map(t => t.name).join(', ')} + </Typography> + </Tooltip> + </Stack> + <Tabs + value={selectedTabOption} + onChange={onSelectTabOption} + aria-label="Tabs para informações da disciplina" + variant={layoutType === 'mobile' ? 'scrollable' : 'fullWidth'} + sx={tabs} + > + {Object.values(TAB_OPTIONS).map(option => ( + <Tab + key={option.value} + label={option.lable} + disabled={isLoading && option.value !== selectedTabOption} + /> + ))} + </Tabs> + </Paper> + </Container> + ); +} + +export default Header; |