finish to build the material card

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