CollectionAuthor.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 { Grid } from '@material-ui/core';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import CircularProgress from '@material-ui/core/CircularProgress';


export default function CollectionAuthor(props) {
	return (
		<Grid container
			direction="column"
			justify="center"
			alignItems="center">
			{props.imgsrc ?
				<Link
					to={`/usuario-publico/${props.author_id}`}
                    contrast={props.contrast}
				>
					<UserAvatar src={props.imgsrc} />
				</Link>
				:
				<CircularProgress color="secondary" />
			}
			<InfoText contrast={props.contrast}>Coleção organizada por:</InfoText>
			{props.name ?
				<Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}>
					<UserName contrast={props.contrast}>{props.name}</UserName>
				</Link>
				:
				<CircularProgress />
			}
		</Grid>
	);
}

const UserAvatar = styled.img`
	border-radius: 75px;
	width: 75px;
	height: auto;
`
const InfoText = styled.p`
	margin-bottom: 0;
	padding-bottom: 0;
    color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
`
const UserName = styled.h2`
	margin-top: 10px;
    color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
    text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
`