MaterialCard.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 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 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 {Link} from 'react-router-dom';

export default function MaterialCard(props) {

    const thumb = require(`../../public/${props.thumb}`)

    const HandleButtonPressed = () => {
        props.handleExpand(props.id);
    }

    const width = window.innerWidth;

    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" }}>
                {
                    width <= 767 ?
                        <Link style={{textDecoration : "none"}} to={`/colecao?colecao=${props.id}`}>
                            <Button
                                color="secondary"
                                endIcon={<ExpandMoreRoundedIcon />}
                            >

                                Ver módulos
                            </Button>
                        </Link>
                        :
                        <Button
                            color="secondary"
                            endIcon={<ExpandMoreRoundedIcon />}
                            onClick={HandleButtonPressed}
                        >

                            Ver módulos
                        </Button>
                }
            </CardActions>
        </Card >
    )
}

const SizedBox = styled.div`
  width : 5px;
`
const Title = styled(Typography)`
    font-weight: 500;
	color: rgb(102, 102, 102);
	font-size: 0.9em;
	margin-left: 10px;
	margin-right: 10px;

	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
`