Add class header layout

src/screens/Classroom/View.js

@@ -0,0 +1,60 @@
+import {
+  Avatar,
+  AvatarGroup,
+  Container,
+  Paper,
+  Stack,
+  Tab,
+  Tabs,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import { TAB_OPTIONS } from './tabOptions';
+import styles from './styles';
+
+function View({ layoutType, classroom, selectedTabOption, onSelectTabOption }) {
+  const { title, container, paper, tabs, avatar, tooltip } = styles[layoutType];
+  return (
+    <Container disableGutters sx={container}>
+      {classroom === null ? (
+        <h1>Loading...</h1>
+      ) : (
+        <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="fullWidth"
+              sx={tabs}
+            >
+              {TAB_OPTIONS.map(option => (
+                <Tab key={option.value} label={option.lable} />
+              ))}
+            </Tabs>
+          </Paper>
+        </Container>
+      )}
+    </Container>
+  );
+}
+
+export default View;

src/screens/Classroom/index.js

@@ -1,11 +1,22 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useUser } from '../../context/user';
+import useLayoutType from '../../hooks/useLayoutType';
+import { TAB_OPTIONS } from './tabOptions';
+import View from './View';
 
 function Classroom() {
   const params = useParams();
+  const layoutType = useLayoutType();
   const { fetchClassroomById } = useUser();
   const [classroom, setClassroom] = useState(null);
+  const [selectedTabOption, setSelectedTabOption] = useState(
+    TAB_OPTIONS.map(o => o.value).indexOf('announcements')
+  );
+
+  const onSelectTabOption = (_, value) => {
+    setSelectedTabOption(value);
+  };
 
   useEffect(() => {
     async function getClassroomById(classId) {
@@ -24,9 +35,12 @@ function Classroom() {
   }, [classroom]);
 
   return (
-    <div>
-      {classroom === null ? <h1>Loading...</h1> : <h1>{classroom.name}</h1>}
-    </div>
+    <View
+      layoutType={layoutType}
+      classroom={classroom}
+      selectedTabOption={selectedTabOption}
+      onSelectTabOption={onSelectTabOption}
+    />
   );
 }
 

src/screens/Classroom/styles.js

@@ -0,0 +1,109 @@
+// ========== Desktop ==========
+const desktopTitle = {
+  fontWeight: 500,
+};
+
+const desktopContainer = {
+  width: '100%',
+  height: '100vh',
+  backgroundColor: '#red',
+  padding: 0,
+  marginTop: '50px',
+};
+
+const desktopPaper = classColor => ({
+  width: '100%',
+  borderTop: `5px solid ${classColor}`,
+  padding: '20px',
+});
+
+const desktopTabs = {
+  marginLeft: '-20px',
+  marginRight: '-20px',
+  marginBottom: '-20px',
+  marginTop: '30px',
+};
+
+const desktopAvatar = {
+  width: 30,
+  height: 30,
+};
+
+const desktopTooltip = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+const desktop = {
+  title: desktopTitle,
+  container: desktopContainer,
+  paper: desktopPaper,
+  tabs: desktopTabs,
+  avatar: desktopAvatar,
+  tooltip: desktopTooltip,
+};
+
+// ========== Mobile ==========
+const mobileTitle = {
+  fontWeight: 500,
+  fontSize: '25px',
+};
+
+const mobileContainer = {
+  width: '90%',
+  height: '100vh',
+  backgroundColor: '#red',
+  padding: 0,
+  marginTop: '30px',
+};
+
+const mobilePaper = classColor => ({
+  width: '100%',
+  borderTop: `5px solid ${classColor}`,
+  padding: '10px',
+});
+
+const mobileTabs = {
+  marginLeft: '-10px',
+  marginRight: '-10px',
+  marginBottom: '-10px',
+  marginTop: '30px',
+};
+
+const mobileAvatar = {
+  width: 30,
+  height: 30,
+};
+
+const mobileTooltip = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+const mobile = {
+  title: mobileTitle,
+  container: mobileContainer,
+  paper: mobilePaper,
+  tabs: mobileTabs,
+  avatar: mobileAvatar,
+  tooltip: mobileTooltip,
+};
+
+// ========== Unset ==========
+const unset = {
+  title: null,
+  container: null,
+  paper: null,
+  tabs: null,
+  avatar: null,
+  tooltip: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;

src/screens/Classroom/tabOptions.js

@@ -0,0 +1,16 @@
+const TAB_OPTIONS = [
+  {
+    value: 'announcements',
+    lable: 'Comunicados',
+  },
+  {
+    value: 'assignments',
+    lable: 'Atividades',
+  },
+  {
+    value: 'people',
+    lable: 'Pessoas',
+  },
+];
+
+export { TAB_OPTIONS };