Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2x 20x 20x 20x 20x 20x 20x 20x 20x 20x 2x 2x | import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' const Wrapper = styled.a` font-family: ${(props) => props.theme['fontPrimary']}; font-weight: ${(props) => props.weight}; font-size: ${(props) => props.size}; text-transform: ${(props) => props.uppercase ? 'uppercase' : props.capitalize ? 'capitalize' : 'none'}; font-style: ${(props) => (props.italic ? 'italic' : 'normal')}; color: ${(props) => props.theme['linkColor']}; opacity: ${(props) => props.opacity}; cursor: pointer; &:hover { color: ${(props) => props.theme['linkHoverColor']}; } ` const Link = ({ children, ...rest }) => <Wrapper {...rest}>{children}</Wrapper> Link.propTypes = { capitalize: PropTypes.bool, children: PropTypes.node, italic: PropTypes.bool, opacity: PropTypes.number, size: PropTypes.string, uppercase: PropTypes.bool, weight: PropTypes.oneOf([100, 200, 300, 400, 500, 600, 700]), } Link.defaultProps = { capitalize: false, italic: false, opacity: 1, size: '14px', uppercase: false, weight: 400, } export default Link |