ChartsNav() — ui Function Reference

Architecture documentation for the ChartsNav() function in charts-nav.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ChartsNav() — ui Function Reference

Dependency Diagram

graph TD
  997bec62_e16f_6ed3_f40c_7993327e617d["ChartsNav()"]
  18e9739a_7a0f_2614_f9d9_5b98f95f324c["charts-nav.tsx"]
  997bec62_e16f_6ed3_f40c_7993327e617d -->|defined in| 18e9739a_7a0f_2614_f9d9_5b98f95f324c
  style 997bec62_e16f_6ed3_f40c_7993327e617d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/charts-nav.tsx lines 44–72

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

  return (
    <ScrollArea className="max-w-[600px] lg:max-w-none">
      <div className={cn("flex items-center", className)} {...props}>
        {links.map((example, index) => (
          <Link
            href={example.href}
            key={example.href}
            className={cn(
              "flex h-7 shrink-0 items-center justify-center rounded-full px-4 text-center text-sm font-medium transition-colors hover:text-primary",
              pathname?.startsWith(example.href) ||
                (index === 0 && pathname === "/charts")
                ? "bg-muted text-primary"
                : "text-muted-foreground"
            )}
          >
            {example.name}
          </Link>
        ))}
      </div>
      <ScrollBar orientation="horizontal" className="invisible" />
    </ScrollArea>
  )
}