FormationMaterialHeader.js

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
import Chip from '@material-ui/core/Chip';
import { makeStyles } from '@material-ui/core/styles';

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


export default function FormationMaterialHeader(props) {
	const colecao = props.colecao;
	const colecao_obj = props.colecao_obj;
	const topico_obj = props.topico_obj;

	const classes = useStyles();

	const get_title = () => {
		return colecao ?
			colecao_obj.name
			: (topico_obj.pre_title + topico_obj.title);
	}

	const get_subtitle = () => {
		return colecao ?
			colecao_obj.topics.length + ' ' + colecao_obj.topic_name
			: colecao_obj.name;
	}

	const getThumb = () => {
		return colecao ?
			require(`../../public/${colecao_obj.img}`)
			: require(`../../public/${topico_obj.img}`)
	}

	return (
		<WrappingCard contrast={props.contrast}>
			<Grid container
				direction="row"
				justify="flex-start"
				alignItems="stretch"
			>
				<Grid item xs={12} lg={5}>
					<Img src={getThumb()} />
				</Grid>
				<Grid item xs={12} lg={7}
					direction="column"
					justify="flex-start"
					alignItems="stretch"
					style={props.contrast === "" ? { padding: "8px 10px" } : { backgroundColor: "black" }}
				>
					<Grid item>
						<Title contrast={props.contrast}>{get_title()}</Title>
					</Grid>
					<Grid item>
						<SubTitle contrast={props.contrast}>
							{colecao ?
								get_subtitle()
								: <StyledLink contrast={props.contrast} to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
						</SubTitle>
					</Grid>
					<Grid item>
						<ChipsDiv className={classes.root}>
							{colecao_obj.tags.map((t, index) => {
								return (<Chip color="default" label={t.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : { border: "1px solid white", padding: "0.5px", backgroundColor: "black", color: "white" }} />);
							})}
						</ChipsDiv>
					</Grid>
					<Grid item>
						{colecao ?
							<StyledLink contrast={props.contrast}>
								<Button
									className="button"
									variant="contained"
									color="secondary"
									style={{ marginLeft: '15px' }}
									onClick={props.handleClick}
								>
									{props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
								</Button>
							</StyledLink>
							:
							<StyledLink contrast={props.contrast} to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
								<Button
									className="button"
									variant="contained"
									color="secondary"
									style={{ marginLeft: '15px', marginTop: '10px' }}
									onClick={props.handleClick}
								>
									{props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
								</Button>
							</StyledLink>
						}
					</Grid>
				</Grid>
			</Grid>
		</WrappingCard>
	);
}

const ChipsDiv = styled.div`
	margin-bottom: 10px;
	width: 100%;
	margin-left: 10px;
`
const Img = styled.img`
	width: 100%;
	height: 100%;
    display: block; /* remove extra space below image */
	background-color: #e5e5e5;
`
const Title = styled.h2`
	font-weight: 100;
	margin: 15px;
	color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};

`
const SubTitle = styled.h4`
	font-weight: 50;
	margin: 15px;;
	margin-top: 0;
	color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
`
export const WrappingCard = styled(Card)`
		background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
		border: ${props => props.contrast === "" ? "none" : "1px solid white"};
		border-radius: 0;
		margin-right : auto;
		margin-left : auto;
		margin-bottom: 30px;
		margin-top: 30px;

		@media screen and (max-width: 768px) {
				width : 100% !important;
		}
		@media screen and (min-width: 992px) {
				width : 770px;
		}
		@media screen and (min-width: 1200px) {
				width : 970px !important;
		}
`

const StyledLink = styled(Link)`
	color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
	text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};

	.button{
		background-color: ${props => props.contrast === "" ? "" : "black "}; 
		color: ${props => props.contrast === "" ? "white" : "yellow"};
		border:  ${props => props.contrast === "" ? "0" : "1px solid white"}; 
		:hover{
			background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
		}
	}
`