diff --git a/src/components/SectorCard/index.js b/src/components/SectorCard/index.js
new file mode 100644
index 0000000..cbe8896
--- /dev/null
+++ b/src/components/SectorCard/index.js
@@ -0,0 +1,40 @@
+import {
+ Card,
+ CardMedia,
+ CardContent,
+ Typography,
+ CardActions,
+ Button,
+} from '@mui/material';
+
+import styles from './styles';
+
+function SectorCard({
+ title,
+ description,
+ coverImage,
+ informationUrl,
+ layoutType,
+}) {
+ const { card, cardMedia } = styles;
+ return (
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+
+ );
+}
+
+export default SectorCard;
diff --git a/src/components/SectorCard/styles.js b/src/components/SectorCard/styles.js
new file mode 100644
index 0000000..1fbd1cb
--- /dev/null
+++ b/src/components/SectorCard/styles.js
@@ -0,0 +1,13 @@
+const card = {
+ maxWidth: 510,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+};
+
+const cardMedia = {
+ component: 'img',
+ height: '140',
+};
+const styles = { card, cardMedia };
+export default styles;
diff --git a/src/screens/Information/View.js b/src/screens/Information/View.js
index f39c8fb..ff47b55 100644
--- a/src/screens/Information/View.js
+++ b/src/screens/Information/View.js
@@ -7,11 +7,12 @@ import {
Stack,
Skeleton,
} from '@mui/material';
+import SectorCard from '../../components/SectorCard';
import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
import styles from './styles';
-function View({ faq, layoutType }) {
+function View({ faq, sectors, layoutType }) {
const {
stackContainer,
skeletonTitle,
@@ -20,6 +21,8 @@ function View({ faq, layoutType }) {
accordionSkeletonStack,
title,
accordionSummary,
+ sectorsTitle,
+ sectorsStack,
} = styles[layoutType];
if (layoutType === 'desktop') {
@@ -59,6 +62,18 @@ function View({ faq, layoutType }) {
) : (
Nenhuma pergunta encontrada
)}
+ Setores do IFMG Campus Sabará
+
+ {sectors.map(sector => (
+
+ ))}
+
);
} else if (layoutType === 'mobile') {
@@ -98,6 +113,18 @@ function View({ faq, layoutType }) {
) : (
Nenhuma pergunta encontrada
)}
+ Setores do IFMG Campus Sabará
+
+ {sectors.map(sector => (
+
+ ))}
+
);
}
diff --git a/src/screens/Information/index.js b/src/screens/Information/index.js
index 3940c44..e9d5c7f 100644
--- a/src/screens/Information/index.js
+++ b/src/screens/Information/index.js
@@ -18,7 +18,76 @@ function Information() {
getClassrooms();
}, [fetchFAQ]);
- return ;
+ const sectors = [
+ {
+ title: 'Controle e Registro Acadêmico (CRA)',
+ description:
+ 'Realiza atividades como a expedição de históricos escolares, declarações de matrícula, diplomas, desligamento de curso, dispensas de disciplinas e outros requerimentos diversos.',
+ informationUrl:
+ 'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/controle-e-registro-academico',
+ coverImage: {
+ image: 'https://pixabay.com/images/download/archive-1850170_640.jpg',
+ alt: 'Fotografia de uma sala cheia de arquivos',
+ },
+ },
+ {
+ title: 'Núcleo de Apoio Educacional (NAE)',
+ description:
+ 'O Núcleo de Apoio Educacional – NAE é o setor que oferece suporte e assessoria às atividades de ensino, pesquisa e extensão. Atua no acompanhamento e assistência direta aos discentes e docentes, no atendimento à comunidade externa e na colaboração com o trabalho dos gestores.',
+ informationUrl:
+ 'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/nae',
+ coverImage: {
+ image: 'https://pixabay.com/images/download/people-2557399_640.jpg',
+ alt: 'Fotografia de pessoas estudando juntas',
+ },
+ },
+ {
+ title: 'Estágios',
+ description:
+ 'Atua na orientação do discente sobre todo o processo de documentação e acompanhamento do estágio.',
+ informationUrl:
+ 'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/estagios-1',
+ coverImage: {
+ image:
+ 'https://thumbs.dreamstime.com/b/est%C3%A1gio-e-lista-de-profissionais-escritos-na-nota-122225688.jpg',
+ alt: 'Fotografia de pessoas estudando juntas',
+ },
+ },
+ {
+ title: 'Pesquisa',
+ description:
+ 'A Coordenação de Pesquisa, Inovação e Pós-graduação do IFMG Campus Sabará, busca fomentar o desenvolvimento da pesquisa e inovação por meio de estímulos para criação de projetos que envolvam a comunidade acadêmica.',
+ informationUrl:
+ 'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/estagios-1',
+ coverImage: {
+ image: 'https://pixabay.com/images/download/microscope-275984_640.jpg',
+ alt: 'Fotografia de um microscópio',
+ },
+ },
+ {
+ title: 'Extensão e Relações Institucionais',
+ description:
+ 'O desenvolvimento da extensão permite a comunidade acadêmica ter um canal de comunicação e de mútuo aprendizado no binômio escola - comunidade.',
+ informationUrl:
+ 'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/estagios-1',
+ coverImage: {
+ image: 'https://pixabay.com/images/download/team-386673_640.jpg',
+ alt: 'Fotografia de pessoas estendendo uma mão em uma roda',
+ },
+ },
+ {
+ title: 'Biblioteca',
+ description:
+ 'A biblioteca do IFMG Campus Sabará tem como finalidade proporcionar ao seu corpo docente e discente, técnicos administrativos, pesquisadores e à comunidade geral o acesso a materiais e informações bibliográficas. Assim, a biblioteca disponibiliza aos seus usuários os serviços de empréstimos, reservas, renovação, auxílio aos alunos, levantamentos bibliográficos e consulta local ao acervo.',
+ informationUrl: 'https://www.ifmg.edu.br/sabara/biblioteca/apresentacao',
+ coverImage: {
+ image: 'https://pixabay.com/images/download/books-1281581_640.jpg',
+ alt: 'Fotografia de uma biblioteca',
+ },
+ },
+ ];
+
+ return ;
}
export default Information;
diff --git a/src/screens/Information/styles.js b/src/screens/Information/styles.js
index 67cd627..e74c9d5 100644
--- a/src/screens/Information/styles.js
+++ b/src/screens/Information/styles.js
@@ -37,6 +37,19 @@ const desktopAccordionSummary = {
backgroundColor: '#f7f7f7',
};
+const desktopSectorsTitle = {
+ marginTop: '100px',
+ textAlign: 'center',
+};
+
+const desktopSectorsStack = {
+ sx: { padding: '40px', paddingBottom: '100px' },
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ flexDirection: 'row',
+ gap: '20px',
+};
+
const desktop = {
stackContainer: desktopStackContainer,
skeletonTitle: desktopSkeletonTitle,
@@ -45,6 +58,8 @@ const desktop = {
accordionSkeletonStack: desktopAccordionSkeletonStack,
title: desktopTitle,
accordionSummary: desktopAccordionSummary,
+ sectorsTitle: desktopSectorsTitle,
+ sectorsStack: desktopSectorsStack,
};
// ========== Mobile ==========
@@ -87,6 +102,17 @@ const mobileAccordionSummary = {
backgroundColor: '#f7f7f7',
};
+const mobileSectorsTitle = {
+ marginTop: '80px',
+ textAlign: 'center',
+ marginBottom: '30px',
+};
+
+const mobileSectorsStack = {
+ sx: { padding: '20px', paddingBottom: '100px' },
+ gap: '20px',
+};
+
const mobile = {
stackContainer: mobileStackContainer,
skeletonTitle: mobileSkeletonTitle,
@@ -95,6 +121,8 @@ const mobile = {
accordionSkeletonStack: mobileAccordionSkeletonStack,
title: mobileTitle,
accordionSummary: mobileAccordionSummary,
+ sectorsTitle: mobileSectorsTitle,
+ sectorsStack: mobileSectorsStack,
};
// ========== Unset ==========
@@ -106,6 +134,8 @@ const unset = {
accordionSkeletonStack: null,
title: null,
accordionSummary: null,
+ sectorsTitle: null,
+ sectorsStack: null,
};
const styles = { desktop, mobile, unset };