/
Link.js
46 lines (42 loc) · 1.1 KB
/
Link.js
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
// @flow
import * as React from 'react';
import sx, { type AllCSSProperties } from '@adeira/sx';
type Props = {
+href: string,
+children: React.Node,
+target?: string,
+isActive?: boolean,
+xstyle?: AllCSSProperties,
};
/**
* This component tries to create a normal `<a />` link with some reasonable default styles for
* light and dark mode. It also sets `noreferrer` and `noopener` correctly for external links.
*/
export default function Link(props: Props): React.Node {
const href = props.href;
const isExternalLink = /^https?:\/\//.test(href);
return (
<a
href={href}
{...((isExternalLink || props.target === '_blank') && { rel: 'noreferrer noopener' })}
target={props.target}
className={sx(styles.default, props.isActive ? null : styles.inactive, props.xstyle)}
>
{props.children}
</a>
);
}
const styles = sx.create({
default: {
'color': 'rgba(var(--sx-text-link-color))',
'cursor': 'pointer',
'textDecoration': 'none',
':hover': {
opacity: 1,
textDecoration: 'underline',
},
},
inactive: {
opacity: 0.85,
},
});