blob: 5a193994348641e3ae947fc3bde447aee0f86fb0 (
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
|
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 spacing="2xs">
{items.map(({ id, ...link }) => (
<NavItem key={id}>
<NavLink {...link} isStack variant="main" />
</NavItem>
))}
</NavList>
</Nav>
);
};
/**
* MainNav component
*
* Render the main navigation.
*/
export const MainNav = forwardRef(MainNavWithRef);
|
