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
|
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 and label be inlined?
*
* @default false
*/
isInline?: boolean;
/**
* The link label.
*/
label: string;
/**
* The link logo.
*/
logo?: ReactNode;
};
const NavLinkWithRef: ForwardRefRenderFunction<
HTMLAnchorElement,
NavLinkProps
> = ({ className = '', isInline = false, label, logo, ...props }, ref) => {
const linkClass = [
styles.link,
styles[isInline ? 'link--inline' : 'link--stack'],
className,
].join(' ');
return (
<Link {...props} className={linkClass} disableTransition ref={ref}>
{logo ? <span className={styles.logo}>{logo}</span> : null}
{label}
</Link>
);
};
export const NavLink = forwardRef(NavLinkWithRef);
|
