import React, { PureComponent } from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import { FONT_SIZE, TRANSITION } from 'config/variables';
import colors from 'config/colors';
import { NavLink } from 'react-router-dom';
const A = styled.a`
text-decoration: none;
cursor: pointer;
transition: ${TRANSITION.HOVER};
font-size: ${FONT_SIZE.SMALL};
${props =>
props.isGreen &&
css`
text-decoration: underline;
text-decoration-color: ${colors.GREEN_PRIMARY};
`}
${props =>
props.isGray &&
css`
text-decoration: underline;
text-decoration-color: ${colors.TEXT_SECONDARY};
`}
&,
&:visited,
&:active,
&:hover {
${props =>
props.isGreen &&
css`
color: ${colors.GREEN_PRIMARY};
`}
${props =>
props.isGray &&
css`
color: ${colors.TEXT_SECONDARY};
`}
}
&:hover {
border-color: transparent;
}
`;
const StyledNavLink = styled(NavLink)`
${props =>
props.isGreen &&
css`
color: ${colors.GREEN_PRIMARY};
`}
${props =>
props.isGray &&
css`
color: ${colors.TEXT_SECONDARY};
`}
`;
class Link extends PureComponent {
render() {
const shouldRenderRouterLink = this.props.to;
let LinkComponent;
if (shouldRenderRouterLink) {
LinkComponent = {this.props.children};
} else {
LinkComponent = (
{this.props.children}
);
}
return LinkComponent;
}
}
Link.propTypes = {
children: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.array,
PropTypes.node,
]).isRequired,
className: PropTypes.string,
href: PropTypes.string,
target: PropTypes.string,
to: PropTypes.string,
onClick: PropTypes.func,
isGreen: PropTypes.bool,
isGray: PropTypes.bool,
};
export default Link;