diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
commit | 65af195054e1f6de41d36a2d30d8342bef9752c0 (patch) | |
tree | 8559d71d6dd4269139afa5334b317f6efe90acd3 /packages/website/ts/components/link.tsx | |
parent | 9f47f90c6e80ba9a61bcb6065fed1e2c6be8c5b7 (diff) | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
download | dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.gz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.bz2 dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.lz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.xz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.zst dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.zip |
Merge branch 'development' into feature/monorepo/release-notes
Diffstat (limited to 'packages/website/ts/components/link.tsx')
-rw-r--r-- | packages/website/ts/components/link.tsx | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/packages/website/ts/components/link.tsx b/packages/website/ts/components/link.tsx new file mode 100644 index 000000000..080a0abcc --- /dev/null +++ b/packages/website/ts/components/link.tsx @@ -0,0 +1,64 @@ +import { Link as SmartLink } from '@0x/react-shared'; +import * as React from 'react'; +import styled from 'styled-components'; + +interface LinkInterface { + color?: string; + children?: React.ReactNode | string; + isNoArrow?: boolean; + hasIcon?: boolean | string; + isBlock?: boolean; + isCentered?: boolean; + href?: string; + theme?: { + textColor: string; + }; + shouldOpenInNewTab?: boolean; + target?: string; +} + +export const Link = (props: LinkInterface) => { + const { children, isNoArrow, href } = props; + + return ( + <StyledLink to={href} {...props}> + {children} + {!isNoArrow && ( + <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" + fill="currentColor" + /> + </svg> + )} + </StyledLink> + ); +}; + +// Added this, & + & doesnt really work since we switch with element types... +export const LinkWrap = styled.div` + a + a, + a + button, + button + a { + margin-left: 20px; + } +`; + +const StyledLink = + styled(SmartLink) < + LinkInterface > + ` + display: ${props => !props.isBlock && 'inline-flex'}; + color: ${props => props.color || props.theme.linkColor}; + text-align: center; + font-size: 18px; + text-decoration: none; + align-items: center; + + @media (max-width: 768px) { + } + + svg { + margin-left: 3px; + } +`; |