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

nav.tsx — ui Source File

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

File tsx ComponentRegistry UIPrimitives 5 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  2711555e_9a73_12c1_8164_9541fc887caa["nav.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  2711555e_9a73_12c1_8164_9541fc887caa --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  2711555e_9a73_12c1_8164_9541fc887caa --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  2711555e_9a73_12c1_8164_9541fc887caa --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  d418ad18_b947_f4e5_6e4c_01100d7a63e4["button"]
  2711555e_9a73_12c1_8164_9541fc887caa --> d418ad18_b947_f4e5_6e4c_01100d7a63e4
  4ad968a1_2bd7_248c_f5ed_f80d5b5f7417["tooltip"]
  2711555e_9a73_12c1_8164_9541fc887caa --> 4ad968a1_2bd7_248c_f5ed_f80d5b5f7417
  style 2711555e_9a73_12c1_8164_9541fc887caa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import Link from "next/link"
import { LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/registry/default/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/registry/new-york/ui/tooltip"

interface NavProps {
  isCollapsed: boolean
  links: {
    title: string
    label?: string
    icon: LucideIcon
    variant: "default" | "ghost"
  }[]
}

export function Nav({ links, isCollapsed }: NavProps) {
  return (
    <div
      data-collapsed={isCollapsed}
      className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2"
    >
      <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
        {links.map((link, index) =>
          isCollapsed ? (
            <Tooltip key={index} delayDuration={0}>
              <TooltipTrigger asChild>
                <Link
                  href="#"
                  className={cn(
                    buttonVariants({ variant: link.variant, size: "icon" }),
                    "h-9 w-9",
                    link.variant === "default" &&
                      "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"
                  )}
                >
                  <link.icon className="h-4 w-4" />
                  <span className="sr-only">{link.title}</span>
                </Link>
              </TooltipTrigger>
              <TooltipContent side="right" className="flex items-center gap-4">
                {link.title}
                {link.label && (
                  <span className="ml-auto text-muted-foreground">
                    {link.label}
                  </span>
                )}
              </TooltipContent>
            </Tooltip>
          ) : (
            <Link
              key={index}
              href="#"
              className={cn(
                buttonVariants({ variant: link.variant, size: "sm" }),
                link.variant === "default" &&
                  "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
                "justify-start"
              )}
            >
              <link.icon className="mr-2 h-4 w-4" />
              {link.title}
              {link.label && (
                <span
                  className={cn(
                    "ml-auto",
                    link.variant === "default" &&
                      "text-background dark:text-white"
                  )}
                >
                  {link.label}
                </span>
              )}
            </Link>
          )
        )}
      </nav>
    </div>
  )
}

Domain

Subdomains

Functions

Types

Dependencies

  • button
  • link
  • lucide-react
  • tooltip
  • utils

Source

Frequently Asked Questions

What does nav.tsx do?
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 nav.tsx?
nav.tsx defines 1 function(s): Nav.
What does nav.tsx depend on?
nav.tsx imports 5 module(s): button, link, lucide-react, tooltip, utils.
Where is nav.tsx in the architecture?
nav.tsx is located at deprecated/www/app/(app)/examples/mail/components/nav.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/app/(app)/examples/mail/components).

Analyze Your Own Codebase

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

Try Supermodel Free