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 className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
            <img src={thumb} alt="thumbnail do recurso" />
            <div>
                <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
                                style={ props.contrast === "" ? { color: "#666" } : { color: "white" }}
                                name="customized-empty"
                                value={props.score}
                                precision={0.5}
                                emptyIcon={<StarBorderIcon fontSize="inherit" />}
                                readOnly
                            />
                        </Grid>
                        <Grid container direction="row" alignItems="center">
                            <Library style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} />
                            <SizedBox />
                            <Typography variant="body2" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
                                {props.modules.length} módulos
                            </Typography>
                        </Grid>
                    </Grid>
                </CardActions>
            </div>
            <CardActions className={`${props.contrast}LinkColor`} style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
                {
                    width <= 767 ?
                        <Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}>
                            <Button
                                style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
                                endIcon={<ExpandMoreRoundedIcon />}
                            >

                                Ver módulos
                            </Button>
                        </Link>
                        :
                        <Button
                            className={`${props.contrast}LinkColor`}
                            style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
                            endIcon={<ExpandMoreRoundedIcon />}
                            onClick={HandleButtonPressed}
                        >

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

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

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