ComponentsList() — ui Function Reference

Architecture documentation for the ComponentsList() function in components-list.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ComponentsList() — ui Function Reference

Dependency Diagram

graph TD
  5876220f_48be_8630_49b8_a226feb2bb0a["ComponentsList()"]
  d86d6a39_2c73_05c0_647b_8ec2caa2ac4a["components-list.tsx"]
  5876220f_48be_8630_49b8_a226feb2bb0a -->|defined in| d86d6a39_2c73_05c0_647b_8ec2caa2ac4a
  style 5876220f_48be_8630_49b8_a226feb2bb0a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/components-list.tsx lines 6–34

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>
  )
}