Navigation Bar

import { NavigationBar } from '@hanzo/ui'

export function Simple() {
  return (
    <NavigationBar
      logo="Acme"
      items={[
        { label: "Docs", href: "/docs" },
        { label: "Pricing", href: "/pricing" },
        { label: "Blog", href: "/blog" },
      ]}
    />
  )
}

export function CenteredLogo() {
  return (
    <NavigationBar
      variant="centered"
      logo="Acme"
      leftItems={[
        { label: "Shop", href: "/shop" },
        { label: "New", href: "/new" },
      ]}
      rightItems={[
        { label: "Cart", href: "/cart" },
        { label: "Account", href: "/account" },
      ]}
    />
  )
}

export function Breadcrumb() {
  return (
    <NavigationBar
      variant="breadcrumb"
      items={[
        { label: "Home", href: "/" },
        { label: "Settings", href: "/settings" },
        { label: "Profile" },
      ]}
    />
  )
}

export function ModelSwitcher() {
  const [model, setModel] = useState("gpt-4")
  return (
    <YStack gap="$2">
      <NavigationBar
        variant="switcher"
        value={model}
        onValueChange={setModel}
        options={[
          { id: "gpt-4", label: "GPT-4", description: "OpenAI" },
          { id: "claude", label: "Claude", description: "Anthropic" },
          { id: "zen", label: "Zen", description: "Hanzo" },
        ]}
      />
    </YStack>
  )
}

Types

export type NavigationBarLink = {
  label: string
  href?: string
  icon?: ReactNode
}

export type NavigationBarPerson = {
  name: string
  avatar?: string
}

export type NavigationBarOption = {
  id: string
  label: string
  description?: string
  icon?: ReactNode
}

export type NavigationBarVariant =
  | 'simple'
  | 'centered'
  | 'breadcrumb'
  | 'icon'
  | 'dashboard'
  | 'ecommerce'
  | 'collaboration'
  | 'communication'
  | 'switcher'

export type NavigationBarProps = {
  variant?: NavigationBarVariant
  logo?: ReactNode
  /** Links for `simple`, `icon`, `ecommerce` (as categories) and `breadcrumb` (as the trail). */
  items?: NavigationBarLink[]
  /** `centered` only — links either side of the logo. */
  leftItems?: NavigationBarLink[]
  rightItems?: NavigationBarLink[]
  /** `dashboard` / `collaboration`. */
  title?: string
  /** `dashboard`. */
  user?: NavigationBarPerson
  /** `collaboration`. */
  collaborators?: NavigationBarPerson[]
  /** `ecommerce`. */
  cartCount?: number
  /** `communication`. */
  contactName?: string
  /** `switcher`. */
  options?: NavigationBarOption[]
  value?: string
  onValueChange?: (id: string) => void
  onSearch?: () => void
  onNotifications?: () => void
  onCall?: () => void
  onVideo?: () => void
  onMessage?: () => void
  children?: ReactNode
}

Exports