ItemExplorer() — ui Function Reference

Architecture documentation for the ItemExplorer() function in item-explorer.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem calls 1

Entity Profile

DesignEngine→ PreviewSystem→ ItemExplorer() — ui Function Reference

Dependency Diagram

graph TD
  b7482379_a4ab_31d0_7d38_b3f9d8230bbc["ItemExplorer()"]
  93421982_5a44_a7db_7503_3ebc25cb0fcb["item-explorer.tsx"]
  b7482379_a4ab_31d0_7d38_b3f9d8230bbc -->|defined in| 93421982_5a44_a7db_7503_3ebc25cb0fcb
  cfa754dd_b2fd_a70d_64dd_e5f582d221a3["cachedGroupedItems()"]
  b7482379_a4ab_31d0_7d38_b3f9d8230bbc -->|calls| cfa754dd_b2fd_a70d_64dd_e5f582d221a3
  style b7482379_a4ab_31d0_7d38_b3f9d8230bbc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/item-explorer.tsx lines 33–108

export function ItemExplorer({
  base,
  items,
}: {
  base: Base["name"]
  items: Pick<RegistryItem, "name" | "title" | "type">[]
}) {
  const [params, setParams] = useDesignSystemSearchParams()

  const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])

  const currentItem = React.useMemo(
    () => items.find((item) => item.name === params.item) ?? null,
    [items, params.item]
  )

  return (
    <Sidebar
      className="sticky z-30 hidden h-[calc(100svh-var(--header-height)-2rem)] overscroll-none bg-transparent xl:flex"
      collapsible="none"
    >
      <SidebarContent className="no-scrollbar -mx-1 overflow-x-hidden">
        {groupedItems.map((group) => (
          <Collapsible
            key={group.type}
            defaultOpen
            className="group/collapsible"
          >
            <SidebarGroup className="px-1 py-0">
              <CollapsibleTrigger className="flex w-full items-center gap-1 py-1.5 text-[0.8rem] font-medium [&[data-state=open]>svg]:rotate-90">
                <ChevronRightIcon className="text-muted-foreground size-3.5 transition-transform" />
                <span>{group.title}</span>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarGroupContent>
                  <SidebarMenu className="border-border/50 relative ml-1.5 border-l pl-2">
                    {group.items.map((item, index) => (
                      <SidebarMenuItem key={item.name} className="relative">
                        <div
                          className={cn(
                            "border-border/50 absolute top-1/2 -left-2 h-px w-2 border-t",
                            index === group.items.length - 1 && "bg-sidebar"
                          )}
                        />
                        {index === group.items.length - 1 && (
                          <div className="bg-sidebar absolute top-1/2 -bottom-1 -left-2.5 w-1" />
                        )}
                        <SidebarMenuButton
                          onClick={() => setParams({ item: item.name })}
                          className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
                          data-active={item.name === currentItem?.name}
                          isActive={item.name === currentItem?.name}
                        >
                          {item.title}
                          <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
                        </SidebarMenuButton>
                        <Link
                          href={`/preview/${base}/${item.name}`}
                          prefetch
                          className="sr-only"
                          tabIndex={-1}
                        >
                          {item.title}
                        </Link>
                      </SidebarMenuItem>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </CollapsibleContent>
            </SidebarGroup>
          </Collapsible>
        ))}
      </SidebarContent>
    </Sidebar>
  )
}