ChartsNav() — ui Function Reference

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

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ChartsNav() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/charts-nav.tsx lines 40–67

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