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 44 45 46 47 | 1x 6x 6x 6x 6x 6x 1x 6x 1x 1x | import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import Image from '../../Atoms/Images/Image' import Link from '../../Atoms/Links/Link' const Wrapper = styled(Link).attrs({ href: (props) => props.url, target: '_blank', })` display: flex; flex-direction: row; justify-content: center; align-items: center; height: ${(props) => props.size}; width: ${(props) => props.size}; padding: 7px; box-sizing: border-box; border-radius: 50%; background-color: ${(props) => props.theme['circleBadgeBackgroundColor']}; transition: all 0.5s; &:hover { background-color: ${(props) => props.theme['circleBadgeHoverColor']}; } ` const CircleBadge = ({ name, size, url, ...rest }) => ( <Wrapper size={size} url={url}> <Image name={name} selectable /> </Wrapper> ) CircleBadge.propTypes = { name: PropTypes.oneOf(['facebook', 'linkedIn', 'twitter']), size: PropTypes.string, url: PropTypes.string.isRequired, } CircleBadge.defaultProps = { name: 'facebook', size: '40px', } export default CircleBadge |