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';

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

						<IconItem>
							<MoveToInboxIcon />
							<Strong>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>
									<TranslateIcon />
									<Strong>Idioma: </Strong>
									{content}
									<br />
								</IconItem>
							);
						})}

						<IconItem>
							<Strong>{colecao ? "Criado" : "Enviado"} por:</Strong>
							<br />
							<StyledAnchor href={colecao_obj.developedurl}>
								{
									colecao_obj.id === 3 ? <LongUserIcon src={require("../img/logo_parceiros/ic_peninsula.png")} />
										: <div>
											<UserIcon src={require("../img/logo_parceiros/ic_nute.png")} />
											<Red>
												{colecao_obj.developed}
											</Red>
										</div>
								}
							</StyledAnchor>
						</IconItem>
					</IconList>
				</Grid>
			</Grid>
		</WrappingCard>
	);
}

const Title = styled.h1`
	font-weight: 100;
	color: rgb(102, 102, 102);
`
const SubTitle = styled.h3`
	font-weight: 900;
	padding-top: 10px;
	color: rgb(102, 102, 102);
`
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: #666;
`
const TextContainer = styled.div`
	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
		}
`

const WrappingCard = styled(Card)`
		border-radius: 0;
		margin-right : auto;
		margin-left : auto;
		margin-bottom: 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;
`
const IconItem = styled.span`
		width: 100%;
		display: inline-block;
		margin-bottom: 15px;
		font-size : 14px;

		.MuiSvgIcon-root {
				vertical-align : middle
				color: #666;
		}

		img {
			vertical-align: middle
		}

`
const Strong = styled.span`
	font-weight: bold;
	color: #666;
`
const Red = styled.span`
	color: #e81f4f;
`
const StyledAnchor = styled.a`
	text-decoration: none !important;
	color: inherit !important;
`