charts-nav.tsx — ui Source File

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

File tsx Internationalization RTLLayout 4 imports 1 functions

Entity Profile

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

Dependency Diagram

graph LR
  c2f803ad_65a3_5686_2638_76faa40c8961["charts-nav.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  c2f803ad_65a3_5686_2638_76faa40c8961 --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb["navigation"]
  c2f803ad_65a3_5686_2638_76faa40c8961 --> f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  c2f803ad_65a3_5686_2638_76faa40c8961 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  47fa1d7a_8370_cd8e_01f5_44e7f16431cc["scroll-area"]
  c2f803ad_65a3_5686_2638_76faa40c8961 --> 47fa1d7a_8370_cd8e_01f5_44e7f16431cc
  style c2f803ad_65a3_5686_2638_76faa40c8961 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

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

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

const links = [
  {
    name: "Area Charts",
    href: "/charts/area#charts",
  },
  {
    name: "Bar Charts",
    href: "/charts/bar#charts",
  },
  {
    name: "Line Charts",
    href: "/charts/line#charts",
  },
  {
    name: "Pie Charts",
    href: "/charts/pie#charts",
  },
  {
    name: "Radar Charts",
    href: "/charts/radar#charts",
  },
  {
    name: "Radial Charts",
    href: "/charts/radial#charts",
  },
  {
    name: "Tooltips",
    href: "/charts/tooltip#charts",
  },
]

export function ChartsNav({
  className,
  ...props
}: React.ComponentProps<"div">) {
  const pathname = usePathname()

  return (
    <div className="relative overflow-hidden">
      <ScrollArea className="max-w-[600px] lg:max-w-none">
        <div className={cn("flex items-center", className)} {...props}>
          {links.map((link) => (
            <Link
              href={link.href}
              key={link.href}
              data-active={link.href.startsWith(pathname)}
              className={cn(
                "text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 shrink-0 items-center justify-center px-4 text-center text-base font-medium transition-colors"
              )}
            >
              {link.name}
            </Link>
          ))}
        </div>
        <ScrollBar orientation="horizontal" className="invisible" />
      </ScrollArea>
    </div>
  )
}