ExpandedMaterials.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
import Chip from '@material-ui/core/Chip';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import TopicCard from './TopicCard';
import Paper from '@material-ui/core/Paper';
import Library from '@material-ui/icons/LibraryBooks';
import { Link } from 'react-router-dom';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        '& > *': {
            margin: theme.spacing(0.5),
        },
    },
}));

const ExpandedMaterial = (props) => {
    const material = { ...props.material };
    const classes = useStyles();

    return (
        <Paper className={`${props.contrast}Border`} elevation={3} style={props.contrast === "" ? { backgroundColor: "#444444", padding: "20px" } : { backgroundColor: "black", padding: "20px" }}>
            <Grid container direction="row" spacing={2}>
                <Grid item direction="column" xs={12} md={4}>
                    <Grid item>
                        <Title variant="body2">
                            {
                                material.name
                            }
                        </Title>
                    </Grid>
                    <SizedHeightBox />
                    <Grid item>
                        <ChipsDiv className={classes.root}>
                            {
                                material.tags.map((tag, index) => {
                                    return (
                                        <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : {border: "1px solid white"}} />
                                    )
                                })
                            }
                        </ChipsDiv>
                    </Grid>
                    <SizedHeightBox2 />
                    <Grid item direction="column" style={{ color: '#E5E7E9', fontWeight: "500" }}>
                        <DevelopedByDiv>
                            {
                                `Desenvolvido por: ${material.developed}`
                            }
                        </DevelopedByDiv>
                        <SizedHeightBox3 />
                        <StyledLink to={`/colecao?colecao=${material.id}`}>
                            <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? { background: "#e8224f" } : { background: "black" }}>
                                Ver todos
                            </Button>
                        </StyledLink>
                    </Grid>
                </Grid>
                <Grid item direction="column" xs={12} md={8}>
                    <Grid container direction="row">
                        <Library style={{ color: "White" }} />
                        <SizedWidthBox />
                        <Title>
                            {material.topics.length} módulos
                        </Title>
                    </Grid>
                    <SizedHeightBox />
                    <Grid container direction="row" justify="center" alignItems="center" spacing={3}>
                        <Grid item md={4}>
                            <TopicCard
                                contrast={props.contrast}
                                topic={material.topics[0]}
                                colecao_id={material.id}
                            />
                        </Grid>
                        <Grid item md={4}>
                            <TopicCard
                                contrast={props.contrast}
                                topic={material.topics[1]}
                                colecao_id={material.id}
                            />
                        </Grid>
                        <Grid item md={4}>
                            <TopicCard
                                contrast={props.contrast}
                                topic={material.topics[2]}
                                colecao_id={material.id}
                            />
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Paper>
    );
}

const Title = styled.h3`
    color: White;
    font-weight: 500;
    padding : 0; 
    margin  : 0; 
`
const DevelopedByDiv = styled.div`
`

const ChipsDiv = styled.div`
    margin-left : -5px;
`
const SizedHeightBox = styled.div`    
    height : 3em;
`
const SizedHeightBox2 = styled.div`    
    height : 2em;
`
const SizedHeightBox3 = styled.div`    
    height : 0.5em;
`
const SizedWidthBox = styled.div`
  width : 5px;
`
const StyledLink = styled(Link)`
	text-decoration: none !important;
	color: inherit !important;
`


export default ExpandedMaterial;