import React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; import remcalc from 'remcalc'; import typography from '../typography'; import { H2 } from '../text/headings'; import Chevron from '../icons/chevron'; const LinkChild = styled(Link)` text-decoration: none; cursor: pointer; &:visited { color: inherit; } `; const Name = H2.extend` ${typography.normal}; color: ${props => props.theme.primary}; margin: ${remcalc(20)} 0 ${remcalc(18)} 0; `; const Arrow = styled(Chevron)` margin: ${remcalc(7)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)}; `; const Container = styled.div` display: inline-flex; align-items: center; `; export default ({ to, children, ...rest }) => { const _child = to ? {children} : children; return ( {_child} ); };