From a473554a4c99aa4474b8a4ce28414b2da0fb255a Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 27 Jan 2021 12:37:09 -0300
Subject: [PATCH] finish to build the material card
---
src/Components/MaterialCard.js | 98 +++++++++++++++++++++++-----------
1 file changed, 68 insertions(+), 30 deletions(-)
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index c5353a91..3d06862b 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -16,40 +16,78 @@ 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, {Component} from 'react';
+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 livro from "../img/laranja/LIVRO_DIGITAL.jpg";
import Library from '@material-ui/icons/LibraryBooks';
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import Grid from '@material-ui/core/Grid';
+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) {
-class MaterialCard extends Component {
- constructor(props) {
- super(props);
- this.state={
- thumbnail: livro,
- };
- }
- render(){
- return (
- <Card>
- <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
- <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
- <Typography variant="body2" color="textSecondary" component="p" style={{overflow: "hidden", fontSize: "0.8em"}}>
- {this.props.name}
- </Typography>
- </CardContent>
- <CardActions style={{justifyContent: "space-between"}}>
- <Library style={{color:"#e81f4f"}} />
- </CardActions>
- <CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}>
- <Typography>Expandir??</Typography>
- </CardActions>
- </Card>
- );}
- }
-
-
-export default MaterialCard;
+ const [expanded, setExpanded] = useState(false);
+
+ const thumb = require(`../../public/${props.thumb}`)
+
+ return (
+ <Card>
+ <img src={thumb} alt="thumbnail do recurso" />
+ <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
+ <Title>
+ {props.name}
+ </Title>
+ </CardContent>
+ <CardActions>
+ <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
+ <Grid item>
+ <Rating
+ name="customized-empty"
+ value={props.score}
+ precision={0.5}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ readOnly
+ />
+ </Grid>
+ <Grid container direction="row" alignItems="center">
+ <Library style={{ color: "#e81f4f" }} />
+ <SizedBox />
+ <Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
+ {props.modules.length} módulos
+ </Typography>
+ </Grid>
+ </Grid>
+ </CardActions>
+ <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ <Button
+ color="secondary"
+ endIcon={expanded ? <ExpandLessRoundedIcon/> : <ExpandMoreRoundedIcon/>}
+ onClick={() => props.handleExpand(props.id)}
+ >
+
+ Expandir
+ </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