BlocksNav() — ui Function Reference

Architecture documentation for the BlocksNav() function in blocks-nav.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ BlocksNav() — ui Function Reference

Dependency Diagram

graph TD
  81a3193c_dacb_3c5e_d328_db195582bab3["BlocksNav()"]
  ceed1060_e8fb_2587_b354_b5e325f3615e["blocks-nav.tsx"]
  81a3193c_dacb_3c5e_d328_db195582bab3 -->|defined in| ceed1060_e8fb_2587_b354_b5e325f3615e
  style 81a3193c_dacb_3c5e_d328_db195582bab3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/blocks-nav.tsx lines 9–32

export function BlocksNav() {
  const pathname = usePathname()

  return (
    <div className="relative overflow-hidden">
      <ScrollArea className="max-w-none">
        <div className="flex items-center">
          <BlocksNavLink
            category={{ name: "Featured", slug: "", hidden: false }}
            isActive={pathname === "/blocks"}
          />
          {registryCategories.map((category) => (
            <BlocksNavLink
              key={category.slug}
              category={category}
              isActive={pathname === `/blocks/${category.slug}`}
            />
          ))}
        </div>
        <ScrollBar orientation="horizontal" className="invisible" />
      </ScrollArea>
    </div>
  )
}