main-nav.tsx — ui Source File

Architecture documentation for main-nav.tsx, a tsx file in the ui codebase. 5 imports, 0 dependents.

File tsx Internationalization Dictionary 5 imports 1 functions

Entity Profile

Internationalization→ Dictionary→ main-nav.tsx — ui Source File

Dependency Diagram

graph LR
  d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de["main-nav.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb["navigation"]
  d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de --> f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb
  c11ea4a2_eb97_176c_a69b_b73675a6f645["docs"]
  d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de --> c11ea4a2_eb97_176c_a69b_b73675a6f645
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de --> 57e86e45_ac6e_7278_be08_9092724e8401
  style d8e5b2e3_bb83_a8b2_4f76_191cdf7fc6de fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"

import { PAGES_NEW } from "@/lib/docs"
import { cn } from "@/lib/utils"
import { Button } from "@/registry/new-york-v4/ui/button"

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>
  )
}