1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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;
|
