aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/link.tsx
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-21 08:01:53 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-12-21 08:01:53 +0800
commitabdf91c691b924b75d71db49fba296da9c8ddcac (patch)
tree78e62a107f1de7f3b16dd63bdbc039ab26b561a3 /packages/website/ts/components/link.tsx
parent9b540fd8e52e7578d3749e6d9ef9cd97d602ffb3 (diff)
downloaddexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar
dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.gz
dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.bz2
dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.lz
dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.xz
dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.zst
dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.zip
feat: move all @next files to non @next directory
Diffstat (limited to 'packages/website/ts/components/link.tsx')
-rw-r--r--packages/website/ts/components/link.tsx64
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;
+ }
+`;