From 7f2dd111dc4811478e6a83aa5a0d5ab35771e2cb Mon Sep 17 00:00:00 2001 From: Luis Felipe Risch <lfr20@inf.ufpr.br> Date: Thu, 28 Jan 2021 10:13:22 -0300 Subject: [PATCH] Build a file to show infos about the modules --- src/Components/ExpandedMaterialCard.js | 67 ++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/Components/ExpandedMaterialCard.js diff --git a/src/Components/ExpandedMaterialCard.js b/src/Components/ExpandedMaterialCard.js new file mode 100644 index 00000000..120cdfa3 --- /dev/null +++ b/src/Components/ExpandedMaterialCard.js @@ -0,0 +1,67 @@ +/*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 Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import CardActions from '@material-ui/core/CardActions'; +import Typography from '@material-ui/core/Typography'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; +import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded'; +import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded'; + +export default function MaterialCard(props) { + + const [expanded, setExpanded] = useState(false); + + const thumb = require(`../../public/${props.thumb}`) + + return ( + <Card> + <img style={{maxHeight : "100%", maxWidth:"100%"}} src={thumb} alt="thumbnail do recurso" /> + <CardContent style={{ height: "50px"}}> + <Title> + {props.name} + </Title> + </CardContent> + <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}> + <Button + color="secondary" + endIcon={expanded ? <ExpandLessRoundedIcon /> : <ExpandMoreRoundedIcon />} + > + + Ver módulos + </Button> + </CardActions> + </Card > + ) +} + +const SizedBox = styled.div` + width : 5px; +` +const Title = styled(Typography)` + text-overflow: ellipsis; + overflow: hidden; + margin-bottom: 10px; + font-size: 1.2em; + line-height: 1.1; + max-height: 46px; + color: #666; +` \ No newline at end of file -- GitLab