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
|
import {
type ForwardRefRenderFunction,
forwardRef,
type ReactNode,
} from 'react';
import { Link, type LinkProps } from '../../../atoms';
import styles from './nav-link.module.scss';
export type NavLinkProps = Omit<LinkProps, 'children' | 'disableTransition'> & {
/**
* Should the logo be above the label?
*
* @default false
*/
isStack?: boolean;
/**
* The link label.
*/
label: ReactNode;
/**
* The link logo.
*/
logo?: ReactNode;
/**
* The link variant.
*
* @default 'regular'
*/
variant?: 'block' | 'main' | 'regular';
};
const NavLinkWithRef: ForwardRefRenderFunction<
HTMLAnchorElement,
NavLinkProps
> = (
{
className = '',
isStack = false,
label,
logo,
variant = 'regular',
...props
},
ref
) => {
const linkClass = [
styles.link,
styles[`link--${variant}`],
styles[isStack ? 'link--stack' : 'link--inline'],
className,
].join(' ');
return (
<Link
{...props}
className={linkClass}
disableTransition={variant === 'main'}
ref={ref}
>
{logo ? <span className={styles.logo}>{logo}</span> : null}
{label}
</Link>
);
};
export const NavLink = forwardRef(NavLinkWithRef);
|
