blob: 001bc3713f750a9c79651a65198685c215f4e015 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
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;
};
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(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;
}
`;
|
