blocks-nav.tsx — ui Source File

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

File tsx Internationalization RTLLayout 4 imports 2 functions

Entity Profile

Internationalization→ RTLLayout→ blocks-nav.tsx — ui Source File

Dependency Diagram

graph LR
  ceed1060_e8fb_2587_b354_b5e325f3615e["blocks-nav.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  ceed1060_e8fb_2587_b354_b5e325f3615e --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb["navigation"]
  ceed1060_e8fb_2587_b354_b5e325f3615e --> f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb
  47f80ba4_67d7_ee87_16e0_b2f8270261e4["categories"]
  ceed1060_e8fb_2587_b354_b5e325f3615e --> 47f80ba4_67d7_ee87_16e0_b2f8270261e4
  47fa1d7a_8370_cd8e_01f5_44e7f16431cc["scroll-area"]
  ceed1060_e8fb_2587_b354_b5e325f3615e --> 47fa1d7a_8370_cd8e_01f5_44e7f16431cc
  style ceed1060_e8fb_2587_b354_b5e325f3615e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

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

import { registryCategories } from "@/lib/categories"
import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"

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

function BlocksNavLink({
  category,
  isActive,
}: {
  category: (typeof registryCategories)[number]
  isActive: boolean
}) {
  if (category.hidden) {
    return null
  }

  return (
    <Link
      href={`/blocks/${category.slug}`}
      key={category.slug}
      className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center px-4 text-center text-base font-medium transition-colors"
      data-active={isActive}
    >
      {category.name}
    </Link>
  )
}