blob: 57d8d6eefd102c6e32556c340f60ee6ecb0cae9c (
plain)
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
|
import {
type ForwardRefRenderFunction,
type ReactNode,
forwardRef,
} from 'react';
import { Nav, type NavProps } from '../../../atoms';
import { NavItem, NavLink, NavList } from '../../../molecules';
export type MainNavItem = {
id: string;
href: string;
label: string;
logo?: ReactNode;
};
export type MainNavProps = Omit<NavProps, 'children'> & {
/**
* The main nav items.
*/
items: MainNavItem[];
};
const MainNavWithRef: ForwardRefRenderFunction<HTMLElement, MainNavProps> = (
{ className = '', items, ...props },
ref
) => {
const wrapperClass = `${className}`;
return (
<Nav {...props} className={wrapperClass} ref={ref}>
<NavList
isInline
// eslint-disable-next-line react/jsx-no-literals
spacing="2xs"
>
{items.map(({ id, ...link }) => (
<NavItem key={id}>
<NavLink
{...link}
isStack
// eslint-disable-next-line react/jsx-no-literals
variant="main"
/>
</NavItem>
))}
</NavList>
</Nav>
);
};
/**
* MainNav component
*
* Render the main navigation.
*/
export const MainNav = forwardRef(MainNavWithRef);
|
