Add Nav component

src/components/Nav/Nav.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+
+import { Tab } from '@headlessui/react';
+import clsx from 'clsx';
+
+export interface NavProps {
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * The label attached to the label
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Nav = ({
+  className,
+  children
+}: NavProps) => {
+  return (
+    <nav
+      className={
+        clsx(
+          'pivot',
+          className
+        )
+      }
+    >
+      {children}
+    </nav>
+  );
+};
+
+export default Nav;

src/components/Nav/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Nav';
+export type { NavProps } from './Nav';

src/components/NavItem/NavItem.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface NavItemProps {
+  /**
+   * Custom classes for the label
+   */
+  active?: boolean;
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * The label attached to the label
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const NavItem = ({
+  className,
+  active,
+  children
+}: NavItemProps) => {
+  return (
+    <>
+      <button
+        className={clsx(
+          'pivot-link',
+          {
+            'active': active
+          },
+          className
+        )}
+      >
+        {children}
+      </button>
+    </>
+  );
+};
+
+export default NavItem;

src/components/NavItem/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NavItem';
+export type { NavItemProps } from './NavItem';

src/components/index.ts

@@ -100,6 +100,12 @@ export type { MenuItemsProps } from '@components/MenuItems';
 export { default as MenuTrigger } from '@components/MenuTrigger';
 export type { MenuTriggerProps } from '@components/MenuTrigger';
 
+export { default as Nav } from '@components/Nav';
+export type { NavProps } from '@components/Nav';
+
+export { default as NavItem } from '@components/NavItem';
+export type { NavItemProps } from '@components/NavItem';
+
 export { default as Offcanvas } from '@components/Offcanvas';
 export type { OffcanvasProps } from '@components/Offcanvas';
 

src/index.ts

@@ -100,6 +100,12 @@ export type { MenuItemsProps } from '@components/MenuItems';
 export { default as MenuTrigger } from '@components/MenuTrigger';
 export type { MenuTriggerProps } from '@components/MenuTrigger';
 
+export { default as Nav } from '@components/Nav';
+export type { NavProps } from '@components/Nav';
+
+export { default as NavItem } from '@components/NavItem';
+export type { NavItemProps } from '@components/NavItem';
+
 export { default as Offcanvas } from '@components/Offcanvas';
 export type { OffcanvasProps } from '@components/Offcanvas';