import * as React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; import { BREAKPOINTS } from 'ts/@next/components/layout'; import { colors } from 'ts/style/colors'; interface ButtonInterface { color?: string; children?: Node | string; isTransparent?: boolean; isNoBorder?: boolean; isNoPadding?: boolean; isWithArrow?: boolean; isAccentColor?: boolean; hasIcon?: boolean | string; isInline?: boolean; href?: string; onClick?: () => any; theme?: { textColor: string; }; } export const Button = styled.button` appearance: none; border: 1px solid transparent; display: ${props => props.isInline && 'inline-block'}; background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'}; color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; text-align: center; font-size: ${props => props.isWithArrow ? '20px' : '18px'}; text-decoration: none; svg { margin-left: 12px; } path { fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; } `; export const Link = (props: ButtonInterface) => { const { children, href, isWithArrow, } = props; const Component = Button.withComponent(ReactRouterLink); return ( {children} { isWithArrow && } ); }; // Added this, & + & doesnt really work since we switch with element types... export const ButtonWrap = styled.div` button + button, a + a, a + button, button + a { @media (min-width: ${BREAKPOINTS.mobile}) { margin-left: 10px; } @media (max-width: ${BREAKPOINTS.mobile}) { margin: 0 10px; } } @media (max-width: ${BREAKPOINTS.mobile}) { white-space: nowrap; } `;