From c21a137e1991af1331fe5768fc6bac15ea9230b1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 25 Oct 2023 17:23:53 +0200
Subject: refactor(components): extract MainNav component from toolbar

---
 src/components/organisms/nav/main-nav/main-nav.tsx | 47 ++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/organisms/nav/main-nav/main-nav.tsx

(limited to 'src/components/organisms/nav/main-nav/main-nav.tsx')

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);
-- 
cgit v1.2.3