diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-12-15 06:42:55 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-15 06:42:55 +0800 |
commit | e3dcb7107bdd7bd8197818a05b163985026f7ca2 (patch) | |
tree | ee8e5617762c49ab9bdb6bde676f49c91eb2f012 /packages/website/ts/@next/components/link.tsx | |
parent | 6d45beccad44e86ddd692d0cf54c09c29c5d9daf (diff) | |
parent | f7ceb4cf582debf2521ef4797674e31a86ff6a38 (diff) | |
download | dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.gz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.bz2 dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.lz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.xz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.zst dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.zip |
Merge pull request #1375 from bakkenbaeck/website
[WIP] Website
Diffstat (limited to 'packages/website/ts/@next/components/link.tsx')
-rw-r--r-- | packages/website/ts/@next/components/link.tsx | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx new file mode 100644 index 000000000..c3633987a --- /dev/null +++ b/packages/website/ts/@next/components/link.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +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; + }; +} + +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(ReactRouterLink)<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; + } +`; |