mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.5 KiB
68 lines
1.5 KiB
6 years ago
|
import React from 'react';
|
||
|
import styled, { css } from 'styled-components';
|
||
|
import PropTypes from 'prop-types';
|
||
6 years ago
|
import { FONT_SIZE, TRANSITION } from 'config/variables';
|
||
6 years ago
|
import colors from 'config/colors';
|
||
|
|
||
|
const A = styled.a`
|
||
|
text-decoration: none;
|
||
|
cursor: pointer;
|
||
|
transition: ${TRANSITION.HOVER};
|
||
6 years ago
|
font-size: ${FONT_SIZE.SMALLER};
|
||
6 years ago
|
|
||
|
${props => props.isGreen && css`
|
||
|
border-bottom: 1px solid ${colors.GREEN_PRIMARY};
|
||
|
`}
|
||
|
${props => props.isGray && css`
|
||
|
border-bottom: 1px solid ${colors.TEXT_SECONDARY};
|
||
|
`}
|
||
|
|
||
|
&,
|
||
6 years ago
|
&:visited,
|
||
6 years ago
|
&:active,
|
||
|
&:hover {
|
||
6 years ago
|
${props => props.isGreen && css`
|
||
|
color: ${colors.GREEN_PRIMARY};
|
||
|
`}
|
||
|
${props => props.isGray && css`
|
||
|
color: ${colors.TEXT_SECONDARY};
|
||
|
`}
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
border-color: transparent;
|
||
|
}
|
||
|
`;
|
||
|
|
||
|
const Link = ({
|
||
6 years ago
|
children, className, href, target, rel, onClick, isGreen = false, isGray = false,
|
||
6 years ago
|
}) => (
|
||
|
<A
|
||
6 years ago
|
className={className}
|
||
6 years ago
|
href={href}
|
||
|
target={target}
|
||
|
rel={rel}
|
||
6 years ago
|
onClick={onClick}
|
||
6 years ago
|
isGreen={isGreen}
|
||
|
isGray={isGray}
|
||
6 years ago
|
>{children}
|
||
6 years ago
|
</A>
|
||
|
);
|
||
|
|
||
|
Link.propTypes = {
|
||
6 years ago
|
children: PropTypes.oneOfType([
|
||
|
PropTypes.string,
|
||
6 years ago
|
PropTypes.object,
|
||
6 years ago
|
PropTypes.array,
|
||
|
]).isRequired,
|
||
6 years ago
|
className: PropTypes.string,
|
||
|
href: PropTypes.string,
|
||
6 years ago
|
target: PropTypes.string,
|
||
|
rel: PropTypes.string,
|
||
6 years ago
|
onClick: PropTypes.func,
|
||
6 years ago
|
isGreen: PropTypes.bool,
|
||
|
isGray: PropTypes.bool,
|
||
|
};
|
||
|
|
||
|
export default Link;
|