MainNav() — ui Function Reference

Architecture documentation for the MainNav() function in main-nav.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ MainNav() — ui Function Reference

Dependency Diagram

graph TD
  4f3c498a_3a54_9bd8_f0b4_bd0fdd0c7078["MainNav()"]
  d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de["main-nav.tsx"]
  4f3c498a_3a54_9bd8_f0b4_bd0fdd0c7078 -->|defined in| d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de
  style 4f3c498a_3a54_9bd8_f0b4_bd0fdd0c7078 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/main-nav.tsx lines 10–41

export function MainNav({
  items,
  className,
  ...props
}: React.ComponentProps<"nav"> & {
  items: { href: string; label: string }[]
}) {
  const pathname = usePathname()

  return (
    <nav className={cn("items-center gap-0", className)} {...props}>
      {items.map((item) => (
        <Button
          key={item.href}
          variant="ghost"
          asChild
          size="sm"
          className="px-2.5"
        >
          <Link
            href={item.href}
            data-active={pathname === item.href}
            data-new={PAGES_NEW.includes(item.href)}
            className="relative items-center"
          >
            {item.label}
          </Link>
        </Button>
      ))}
    </nav>
  )
}