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
82
83
84
85
86
87
88
89
90
|
import NextLink from 'next/link';
import {
forwardRef,
type AnchorHTMLAttributes,
type ForwardRefRenderFunction,
type ReactNode,
} from 'react';
import styles from './link.module.scss';
export type LinkProps = Omit<
AnchorHTMLAttributes<HTMLAnchorElement>,
'children' | 'download' | 'hrefLang' | 'lang'
> & {
/**
* The link body.
*/
children: ReactNode;
/**
* Should we disable the default transition on links?
*
* @default false
*/
disableTransition?: boolean;
/**
* True if it is a download link.
*
* @default false
*/
isDownload?: boolean;
/**
* True if it is an external link.
*
* @default false
*/
isExternal?: boolean;
/**
* The link target.
*/
href: string;
/**
* The link target code language.
*/
lang?: string;
};
const LinkWithRef: ForwardRefRenderFunction<HTMLAnchorElement, LinkProps> = (
{
children,
className = '',
disableTransition = false,
isDownload = false,
isExternal = false,
href,
lang,
rel = '',
...props
},
ref
) => {
const LinkComponent = isExternal ? 'a' : NextLink;
const linkClass = [
styles.link,
styles[disableTransition ? '' : 'link--regular'],
styles[isDownload ? 'link--download' : ''],
styles[isExternal ? 'link--external' : ''],
className,
].join(' ');
const linkRel =
isExternal && !rel.includes('external') ? `external ${rel}` : rel;
return (
<LinkComponent
{...props}
className={linkClass}
href={href}
hrefLang={lang}
ref={ref}
rel={linkRel}
>
{children}
</LinkComponent>
);
};
/**
* Link Component
*
* Render a link.
*/
export const Link = forwardRef(LinkWithRef);
|
