From 78624ebab9d417bed89d7e195110d0fbe09c9310 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 17 Mar 2021 11:17:45 -0300
Subject: [PATCH] Finish to build Material Page
---
src/Pages/MaterialPage.js | 148 ++++++++++++++++++++++++++++++++++++++
1 file changed, 148 insertions(+)
create mode 100644 src/Pages/MaterialPage.js
diff --git a/src/Pages/MaterialPage.js b/src/Pages/MaterialPage.js
new file mode 100644
index 00000000..23866674
--- /dev/null
+++ b/src/Pages/MaterialPage.js
@@ -0,0 +1,148 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState } from "react";
+import { Col, Row, Container } from "react-grid-system";
+import { Carousel } from "react-responsive-carousel";
+import MaterialCard from "../Components/MaterialCard";
+import colecoes_obj from "../Components/FormationMaterialsResources/formationMaterials";
+import ExpandedMaterial from "../Components/ExpandedMaterials";
+import styled from "styled-components";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from "react-router-dom";
+import { Paper } from "@material-ui/core";
+
+const MateriaPage = () => {
+ const materials = colecoes_obj();
+
+ const [currMaterial, setCurrMaterial] = useState({
+ open: false,
+ material: {},
+ });
+
+ const HandleExpandMaterial = (id) => {
+ if (id !== currMaterial.material.id)
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] },
+ });
+ else
+ setCurrMaterial({
+ open: false,
+ material: {},
+ });
+ };
+
+ return (
+ <>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Materias de Formação</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <StyledBox>
+ <StyledTitle>
+ Materias de formação
+ </StyledTitle>
+ </StyledBox>
+ <MainContainer>
+ <Container style={{ padding: "20px" }}>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ infiniteLoop={true}
+ showStatus={false}
+ >
+ <Row>
+ {materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={HandleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ );
+ })}
+ </Row>
+ </Carousel>
+ {currMaterial.open ? (
+ <ExpandedMaterial material={currMaterial.material} />
+ ) : null}
+ </Container>
+ </MainContainer>
+ </>
+ );
+};
+
+export default MateriaPage;
+
+const MainContainer = styled.div`
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0;
+
+ @media screen and (min-width: 768px) {
+ width: 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width: 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width: 1170px;
+ }
+`
+
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display: flex;
+ justify-content: flex-start;
+ max-width: 1170px;
+ span {
+ color: #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+`
+
+const BreadCrumbsDiv = styled.div`
+ padding: 10px;
+ display: flex;
+`
+
+const StyledBox = styled.div`
+ background-color: #fff;
+ box-shadow: 1px 1px 3px rgba(0,0,0,.12), 1px 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ margin-bottom: 30px;
+ text-align: center;
+`
+const StyledTitle = styled.span`
+ text-align: center;
+ color: #e81f4f;
+ font-size: 26px;
+ font-family: "Roboto", regular;
+ font-weight: 100;
+`
\ No newline at end of file
--
GitLab