refactor(components): extract MainNav component from toolbar

1 files changed, 47 insertions, 0 deletions

diff --git a/src/components/organisms/nav/main-nav/main-nav.tsx b/src/components/organisms/nav/main-nav/main-nav.tsx
new file mode 100644
index 0000000..5a19399
--- /dev/null
+++ b/src/components/organisms/nav/main-nav/main-nav.tsx
@@ -0,0 +1,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);