ui Architecture Docs
Home / File/ components-list.tsx — ui Source File

components-list.tsx — ui Source File

Architecture documentation for components-list.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx Internationalization RTLLayout 3 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  d86d6a39_2c73_05c0_647b_8ec2caa2ac4a["components-list.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  d86d6a39_2c73_05c0_647b_8ec2caa2ac4a --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  c11ea4a2_eb97_176c_a69b_b73675a6f645["docs"]
  d86d6a39_2c73_05c0_647b_8ec2caa2ac4a --> c11ea4a2_eb97_176c_a69b_b73675a6f645
  858e60a8_4233_8866_a501_707e973859f9["page-tree"]
  d86d6a39_2c73_05c0_647b_8ec2caa2ac4a --> 858e60a8_4233_8866_a501_707e973859f9
  style d86d6a39_2c73_05c0_647b_8ec2caa2ac4a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Link from "next/link"

import { PAGES_NEW } from "@/lib/docs"
import { getPagesFromFolder, type PageTreeFolder } from "@/lib/page-tree"

export function ComponentsList({
  componentsFolder,
  currentBase,
}: {
  componentsFolder: PageTreeFolder
  currentBase: string
}) {
  const list = getPagesFromFolder(componentsFolder, currentBase)

  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20">
      {list.map((component) => (
        <Link
          key={component.$id}
          href={component.url}
          className="inline-flex items-center gap-2 text-lg font-medium underline-offset-4 hover:underline md:text-base"
        >
          {component.name}
          {PAGES_NEW.includes(component.url) && (
            <span
              className="flex size-2 rounded-full bg-blue-500"
              title="New"
            />
          )}
        </Link>
      ))}
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • docs
  • link
  • page-tree

Source

Frequently Asked Questions

What does components-list.tsx do?
components-list.tsx is a source file in the ui codebase, written in tsx. It belongs to the Internationalization domain, RTLLayout subdomain.
What functions are defined in components-list.tsx?
components-list.tsx defines 1 function(s): ComponentsList.
What does components-list.tsx depend on?
components-list.tsx imports 3 module(s): docs, link, page-tree.
Where is components-list.tsx in the architecture?
components-list.tsx is located at apps/v4/components/components-list.tsx (domain: Internationalization, subdomain: RTLLayout, directory: apps/v4/components).

Analyze Your Own Codebase

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

Try Supermodel Free