From 1386db20adb4bd78ad048943cf25cd26844c8cb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Wed, 6 Jul 2022 16:59:17 -0300 Subject: [PATCH] Add IFMG Sectors info --- src/components/SectorCard/index.js | 40 ++++++++++++++++ src/components/SectorCard/styles.js | 13 ++++++ src/screens/Information/View.js | 29 +++++++++++- src/screens/Information/index.js | 71 ++++++++++++++++++++++++++++- src/screens/Information/styles.js | 30 ++++++++++++ 5 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 src/components/SectorCard/index.js create mode 100644 src/components/SectorCard/styles.js 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 };