feat: Improved navigation

package.json

@@ -19,6 +19,7 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@do-ob/core": "^1.0.0",
     "@do-ob/eslint-config": "^2.3.0",
     "@do-ob/ts-config": "^2.0.0",
     "@do-ob/ui": "workspace:*",

packages/ui/src/Navigation/Navigation.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Navigation } from './Navigation';
+import { Link } from '../types';
 
 const meta = {
   component: Navigation,
@@ -13,15 +14,32 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const links: Link[] = [
+  {
+    title: 'Home',
+    url: '#',
+  },
+  {
+    title: 'About',
+    url: '#about',
+  },
+  {
+    title: 'Contact',
+    url: '#contact',
+  },
+];
+
 export const Standard: Story = {
   args: {
     title: 'Navigation',
+    links,
   },
 };
 
 export const Island: Story = {
   args: {
     title: 'Navigation',
-    variant: 'island'
+    variant: 'island',
+    links,
   },
 };

packages/ui/src/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import type { ThemeColor } from '../types';
+import type { Link, ThemeColor } from '../types';
 
 import { NavigationStandard } from './NavigationStandard';
 import { NavigationIsland } from './NavigationIsland';
@@ -13,6 +13,11 @@ export interface NavigationProps {
    * The theme color of the navigation
    */
   color?: ThemeColor;
+
+  /**
+   * The links of the navigation
+   */
+  links?: Link[];
 }
 
 export interface NavigationVariantProps extends NavigationProps {

packages/ui/src/Navigation/NavigationIsland.tsx

@@ -1,11 +1,15 @@
 import { Navbar, NavbarContent } from '@nextui-org/react';
-import { twColors, clsx } from '@do-ob/ui/utility';
+import { twColors } from '@do-ob/ui/utility';
+import { clsx } from '@do-ob/core';
+
 import type { NavigationProps } from './Navigation';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
+import { NavigationPart_Links } from './parts/NavigationPart_Links';
 
 export function NavigationIsland({
   title,
   color,
+  links,
 }: NavigationProps) {
 
   const [ colors ] = twColors(color);
@@ -16,13 +20,8 @@ export function NavigationIsland({
         <NavigationPart_Brand title={title} />
       </NavbarContent>
       <NavbarContent justify="center">
-        <div className={clsx(color && colors, 'rounded-full px-8 py-3')}>
-          <div className="flex space-x-4">
-            <a href="#" className="text-base">Home</a>
-            <a href="#" className="text-base">About</a>
-            <a href="#" className="text-base">Services</a>
-            <a href="#" className="text-base">Contact</a>
-          </div>
+        <div className={clsx(color && colors, 'flex gap-1 rounded-full px-4 py-1')}>
+          <NavigationPart_Links links={links} />
         </div>
       </NavbarContent>
       <NavbarContent justify="start">

packages/ui/src/Navigation/NavigationStandard.tsx

@@ -1,5 +1,6 @@
 import { Navbar, NavbarContent } from '@nextui-org/react';
-import { clsx, twColors } from '@do-ob/ui/utility';
+import { twColors } from '@do-ob/ui/utility';
+import { clsx } from '@do-ob/core';
 import type { NavigationProps } from './Navigation';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
 

packages/ui/src/Navigation/parts/NavigationPart_Links.tsx

@@ -0,0 +1,33 @@
+import { NavbarMenuItem, Link, Button } from '@nextui-org/react';
+import { Link as LinkType } from '@do-ob/ui/types';
+
+/**
+ * Navigation Brand properties
+ */
+export interface NavigationPart_LinksProps {
+  /**
+   * The branding title to display.
+   */
+  links?: LinkType[];
+}
+
+/**
+ * Navigation Links component
+ */
+export function NavigationPart_Links({
+  links = [],
+}: NavigationPart_LinksProps) {
+  return links.length ? links.map((link) => (
+    <NavbarMenuItem>
+      <Button as={Link} href={link.url} variant="light" className="text-inherit">
+        {link.title}
+      </Button>
+    </NavbarMenuItem>
+  )) : (
+    <NavbarMenuItem>
+      &nbsp;
+    </NavbarMenuItem>
+  );
+}
+
+export default NavigationPart_Links;

packages/ui/src/types.ts

@@ -2,3 +2,23 @@
  * Theem colors.
  */
 export type ThemeColor = 'background' | 'foreground' | 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+
+/**
+ * A link to another page.
+ */
+export interface Link {
+  /**
+   * The URL of the link.
+   */
+  url: string;
+
+  /**
+   * The text title of the link.
+   */
+  title: string;
+
+  /**
+   * Nested links.
+   */
+  links?: Link[];
+}

packages/ui/src/utility.ts

@@ -15,19 +15,3 @@ export function twColors(color?: ThemeColor): [full: string, bg: string, text: s
       return [ `bg-${color} [&>*]:text-${color}-foreground`, `bg-${color}`, `text-${color}-foreground` ];
   }
 }
-
-
-/**
- * Constructs class names conditionally.
- */
-export function clsx(...args: unknown[]) {
-  let i=0, tmp, str='';
-  const len = args.length;
-  for (; i < len; i++) {
-    tmp = args[i];
-    if (typeof tmp === 'string') {
-      str += (str && ' ') + tmp;
-    }
-  }
-  return str;
-}