ui Architecture Docs
Home / File/ examples-nav.tsx — ui Source File

examples-nav.tsx — ui Source File

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

File tsx ComponentRegistry UIPrimitives 4 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  1cf27d2b_e690_de0f_6137_33948a13de0c["examples-nav.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  1cf27d2b_e690_de0f_6137_33948a13de0c --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb["navigation"]
  1cf27d2b_e690_de0f_6137_33948a13de0c --> f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  1cf27d2b_e690_de0f_6137_33948a13de0c --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  87012fb0_00c6_7ce4_2418_e4e3b26e5dac["scroll-area"]
  1cf27d2b_e690_de0f_6137_33948a13de0c --> 87012fb0_00c6_7ce4_2418_e4e3b26e5dac
  style 1cf27d2b_e690_de0f_6137_33948a13de0c 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/ui/scroll-area"

const examples = [
  {
    name: "Mail",
    href: "/examples/mail",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
    hidden: false,
  },
  {
    name: "Dashboard",
    href: "/examples/dashboard",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
    hidden: false,
  },
  {
    name: "Tasks",
    href: "/examples/tasks",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
    hidden: false,
  },
  {
    name: "Playground",
    href: "/examples/playground",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
    hidden: false,
  },
  {
    name: "Forms",
    href: "/examples/forms",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
    hidden: false,
  },
  {
    name: "Music",
    href: "/examples/music",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
    hidden: false,
  },
  {
    name: "Authentication",
    href: "/examples/authentication",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
    hidden: false,
  },
]

interface ExamplesNavProps extends React.HTMLAttributes<HTMLDivElement> {}

export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
  const pathname = usePathname()

  return (
    <div className="relative">
      <ScrollArea className="max-w-[600px] lg:max-w-none">
        <div className={cn("flex items-center", className)} {...props}>
          <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>
  )
}

function ExampleLink({
  example,
  isActive,
}: {
  example: (typeof examples)[number]
  isActive: boolean
}) {
  if (example.hidden) {
    return null
  }

  return (
    <Link
      href={example.href}
      key={example.href}
      className="flex h-7 items-center justify-center rounded-full px-4 text-center text-sm font-medium text-muted-foreground transition-colors hover:text-primary data-[active=true]:bg-muted data-[active=true]:text-primary"
      data-active={isActive}
    >
      {example.name}
    </Link>
  )
}

Domain

Subdomains

Functions

Types

Dependencies

  • link
  • navigation
  • scroll-area
  • utils

Source

Frequently Asked Questions

What does examples-nav.tsx do?
examples-nav.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in examples-nav.tsx?
examples-nav.tsx defines 2 function(s): ExampleLink, ExamplesNav.
What does examples-nav.tsx depend on?
examples-nav.tsx imports 4 module(s): link, navigation, scroll-area, utils.
Where is examples-nav.tsx in the architecture?
examples-nav.tsx is located at deprecated/www/components/examples-nav.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free