This repository has been archived by the owner on Mar 23, 2023. It is now read-only.
/
Link.tsx
81 lines (73 loc) · 1.86 KB
/
Link.tsx
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import Tippy from "@tippyjs/react";
import React from "react";
import { Link as RouterLink, LinkProps } from "react-router-dom";
import { styled } from "twin.macro";
import { openExternal } from "utils/electron-utils";
import { Icon } from "../Icon";
const AnchorStyled = styled.a<{ isExternal: boolean }>`
${({ isExternal }) =>
isExternal &&
`
text-decoration: underline;
text-decoration-style: dotted;
&:active {
text-decoration-style: dotted;
}
&:hover:not(:active) {
text-decoration: none;
}
`}
`;
type AnchorProps = {
isExternal?: boolean;
navigate?: () => void;
} & React.AnchorHTMLAttributes<any>;
const Anchor = React.forwardRef<HTMLAnchorElement, Props>(
({ isExternal, children, rel, ...props }: AnchorProps, ref) => (
<AnchorStyled
data-testid="Link"
isExternal={isExternal!}
className="inline-flex items-center font-semibold cursor-pointer transition-colors duration-200 text-theme-primary hover:text-theme-primary-dark hover:underline active:text-theme-primary-500"
rel={isExternal ? "noopener noreferrer" : rel}
ref={ref}
onClick={(event) => {
event.preventDefault();
return props.navigate?.();
}}
{...props}
>
{children}
{isExternal && (
<Icon
data-testid="Link__external"
name="Redirect"
className={`flex-shrink-0 ${children ? "ml-2 text-sm" : ""}`}
/>
)}
</AnchorStyled>
),
);
Anchor.displayName = "Anchor";
type Props = {
isExternal?: boolean;
children?: React.ReactNode;
tooltip?: string;
} & LinkProps;
export const Link = ({ tooltip, ...props }: Props) => (
<Tippy content={tooltip} disabled={!tooltip}>
{props.isExternal ? (
<Anchor
onClick={(event) => {
event.preventDefault();
return openExternal(props.to);
}}
{...props}
/>
) : (
<RouterLink component={Anchor} {...props} />
)}
</Tippy>
);
Link.defaultProps = {
isExternal: false,
};