Finish to build Material Page

src/Pages/MaterialPage.js

+/*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