ExamplesNav() — ui Function Reference

Architecture documentation for the ExamplesNav() function in examples-nav.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ ExamplesNav() — ui Function Reference

Dependency Diagram

graph TD
  ff3972b3_fb33_7e22_a708_4f0548ef84c4["ExamplesNav()"]
  ab003c5d_c16d_30b1_977c_3bb1481a4b49["examples-nav.tsx"]
  ff3972b3_fb33_7e22_a708_4f0548ef84c4 -->|defined in| ab003c5d_c16d_30b1_977c_3bb1481a4b49
  style ff3972b3_fb33_7e22_a708_4f0548ef84c4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/examples-nav.tsx lines 42–68

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

  return (
    <div className={cn("flex items-center", className)} {...props}>
      <ScrollArea className="max-w-[96%] md:max-w-[600px] lg:max-w-none">
        <div className="flex items-center">
          <ExampleLink
            example={{ name: "Examples", href: "/", code: "", hidden: false }}
            isActive={pathname === "/"}
          />
          {examples.map((example) => (
            <ExampleLink
              key={example.href}
              example={example}
              isActive={pathname?.startsWith(example.href) ?? false}
            />
          ))}
        </div>
        <ScrollBar orientation="horizontal" className="invisible" />
      </ScrollArea>
    </div>
  )
}