FormationMaterialDescription.js

import React from 'react';
import styled from 'styled-components'

import Grid from '@material-ui/core/Grid';

import Card from '@material-ui/core/Card';

import MoveToInboxIcon from '@material-ui/icons/MoveToInbox';
import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
import TranslateIcon from '@material-ui/icons/Translate';

import { IcNute } from "ImportImages.js"; 
import { IcPeninsula } from "ImportImages.js"; 

export default function FormationMaterialDescription(props) {
	/* props
		*
		* colecao: boolean
		* colecao_obj: object
		* topico_obj: object
		*
	*/
	const colecao = props.colecao;
	const colecao_obj = props.colecao_obj;
	const topico_obj = props.topico_obj;

	return (
		<WrappingCard contrast={props.contrast}>
			<Grid container
				style={props.contrast === "" ? {} : {backgroundColor: "black"}}
				direction="row"
				justify="flex-start"
				alignItems="center"
			>
				<Grid item xs={12} md={8}>
					<TextContainer contrast={props.contrast}>
						<Title contrast={props.contrast}>
							{colecao ?
								"Sobre o Material"
								: "Resumo do " + props.colecao_obj.topic_name.slice(0, -1)
							}
						</Title>
						<Description contrast={props.contrast}>
							{colecao ?
								colecao_obj.description
								: topico_obj.description
							}
						</Description>
						{colecao ?
							<SubTitle contrast={props.contrast}>Histórico do Curso</SubTitle>
							: <Strong contrast={props.contrast}>Autoria (autores):</Strong>
						}
						<Description contrast={props.contrast}>
							{colecao ?
								colecao_obj.historic
								: topico_obj.author
							}
						</Description>
					</TextContainer>
				</Grid>
				<Grid item xs={12} md={3}>
					<IconList contrast={props.contrast}>
						<IconItem contrast={props.contrast}>
							<LibraryBooksIcon />
							<Strong contrast={props.contrast}>Tipo de recurso: </Strong>
							Material de Formação
							<br />
						</IconItem>

						<IconItem contrast={props.contrast}>
							<MoveToInboxIcon />
							<Strong contrast={props.contrast}>Ano de publicação: </Strong>
							{colecao ?
								colecao_obj.created_at.split('-')[0]
								: topico_obj.created_at.split('-')[0]
							}
							<br />
						</IconItem>

						{[0, 1, 2].map(i => {
							const content = colecao ?
								(colecao_obj.language[i] ?
									colecao_obj.language[i].name
									: '')
								: (topico_obj.language[i] ?
									topico_obj.language[i].name
									: '')
							return (
								<IconItem contrast={props.contrast}>
									<TranslateIcon />
									<Strong contrast={props.contrast}>Idioma: </Strong>
									{content}
									<br />
								</IconItem>
							);
						})}

						<IconItem contrast={props.contrast}>
							<Strong contrast={props.contrast}>{colecao ? "Criado" : "Enviado"} por:</Strong>
							<br />
							<StyledAnchor href={colecao_obj.developedurl}>
								{
									colecao_obj.id === 3 ? <LongUserIcon src={IcNute} />
										: <div>
											<UserIcon src={IcPeninsula} />
											<Red>
												{colecao_obj.developed}
											</Red>
										</div>
								}
							</StyledAnchor>
						</IconItem>
					</IconList>
				</Grid>
			</Grid>
		</WrappingCard>
	);
}

const Title = styled.h1`
	font-weight: 100;
	color: ${props => props.contrast === "" ? "#666" : "white"};

`
const SubTitle = styled.h3`
	font-weight: 900;
	padding-top: 10px;
	color: ${props => props.contrast === "" ? "#666" : "white"};

`
const UserIcon = styled.img`
	width: 50px;
	height: 50px;
	border-radius: 100px;
	margin: 10px 5px 10px 10px;
`
const LongUserIcon = styled.img`
	width: 90px;
	margin: 10px;
`
const Description = styled.p`
	color: ${props => props.contrast === "" ? "#666" : "white"};
`
const TextContainer = styled.div`
	background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
	margin: 15px;
	height: 100%;
		@media screen and (max-width: 768px) {
			border-bottom: solid 1px #e5e5e5;
			padding : 0 0 10px 0
		}
		@media screen and (max-width: 990px) {
			border-bottom: solid 1px #e5e5e5;
			padding : 0 0 10px 0
		}
		@media screen and (min-width: 992px) {
			border-right: solid 1px #e5e5e5;
			padding : 0 15px 0 0

		}
		@media screen and (min-width: 1200px) {
			border-right: solid 1px #e5e5e5;
			padding : 0 15px 0 0
		}
`
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 IconList = styled.div`
	margin: 15px;
	background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const IconItem = styled.span`
		width: 100%;
		display: inline-block;
		margin-bottom: 15px;
		font-size : 14px;
		color: ${props => props.contrast === "" ? "#666" : "white"};

		.MuiSvgIcon-root {
				vertical-align : middle
				color: ${props => props.contrast === "" ? "#666" : "white"};
		}

		img {
			vertical-align: middle
		}

`
const Strong = styled.span`
	font-weight: bold;
	color: ${props => props.contrast === "" ? "#666" : "white"};
`
const Red = styled.span`
	color: ${props => props.contrast === "" ? "#e81f4f" : "yellow"};
	text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
const StyledAnchor = styled.a`
	text-decoration: none !important;
	color: inherit !important;
`