DirectoryList() — ui Function Reference

Architecture documentation for the DirectoryList() function in directory-list.tsx from the ui codebase.

Function tsx Internationalization Dictionary calls 1

Entity Profile

Internationalization→ Dictionary→ DirectoryList() — ui Function Reference

Dependency Diagram

graph TD
  ec2905ed_5500_9c15_be41_b177d10e0fa4["DirectoryList()"]
  3efca8a9_c761_49f2_7986_266f8b6c8fb6["directory-list.tsx"]
  ec2905ed_5500_9c15_be41_b177d10e0fa4 -->|defined in| 3efca8a9_c761_49f2_7986_266f8b6c8fb6
  f2f9206f_87a9_c468_6bc6_2d063198c94d["getHomepageUrl()"]
  ec2905ed_5500_9c15_be41_b177d10e0fa4 -->|calls| f2f9206f_87a9_c468_6bc6_2d063198c94d
  style ec2905ed_5500_9c15_be41_b177d10e0fa4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/directory-list.tsx lines 32–83

export function DirectoryList() {
  const { registries } = useSearchRegistry()

  return (
    <div className="mt-6">
      <SearchDirectory />
      <ItemGroup className="my-8">
        {registries.map((registry, index) => (
          <React.Fragment key={index}>
            <Item className="group/item relative gap-6 px-0">
              <ItemMedia
                variant="image"
                dangerouslySetInnerHTML={{ __html: registry.logo }}
                className="*:[svg]:fill-foreground grayscale *:[svg]:size-8"
              />
              <ItemContent>
                <ItemTitle>
                  <a
                    href={getHomepageUrl(registry.homepage)}
                    target="_blank"
                    rel="noopener noreferrer external"
                    className="group flex items-center gap-1"
                  >
                    {registry.name}{" "}
                    <IconArrowUpRight className="size-4 opacity-0 group-hover:opacity-100" />
                  </a>
                </ItemTitle>
                {registry.description && (
                  <ItemDescription className="text-pretty">
                    {registry.description}
                  </ItemDescription>
                )}
              </ItemContent>
              <ItemActions className="relative z-10 hidden self-start sm:flex">
                <DirectoryAddButton registry={registry} />
              </ItemActions>
              <ItemFooter className="justify-start pl-16 sm:hidden">
                <Button size="sm" variant="outline">
                  View <IconArrowUpRight />
                </Button>
                <DirectoryAddButton registry={registry} />
              </ItemFooter>
            </Item>
            {index < globalRegistries.length - 1 && (
              <ItemSeparator className="my-1" />
            )}
          </React.Fragment>
        ))}
      </ItemGroup>
    </div>
  )
}