ColorsNav() — ui Function Reference

Architecture documentation for the ColorsNav() function in colors-nav.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ColorsNav() — ui Function Reference

Dependency Diagram

graph TD
  d163eb31_f1cb_6777_d573_116dd87e0d5a["ColorsNav()"]
  423c1f34_0c68_e6b6_fcd6_b0d9efa4828f["colors-nav.tsx"]
  d163eb31_f1cb_6777_d573_116dd87e0d5a -->|defined in| 423c1f34_0c68_e6b6_fcd6_b0d9efa4828f
  style d163eb31_f1cb_6777_d573_116dd87e0d5a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/colors-nav.tsx lines 10–41

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

  return (
    <div className={cn("flex items-center", className)} {...props}>
      <ScrollArea className="max-w-full">
        <div className="flex items-center">
          {colors.map((colorPalette, index) => (
            <Link
              href={`/colors#${colorPalette.name}`}
              key={colorPalette.name}
              data-active={
                pathname?.startsWith(colorPalette.name) ||
                (index === 0 && pathname === "/colors")
              }
              className={cn(
                "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 capitalize transition-colors"
              )}
            >
              {colorPalette.name}
            </Link>
          ))}
        </div>
        <ScrollBar orientation="horizontal" className="invisible" />
      </ScrollArea>
    </div>
  )
}