ComponentWrapper() — ui Function Reference

Architecture documentation for the ComponentWrapper() function in component-wrapper.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI calls 1

Entity Profile

DocumentationAtlas→ SearchAPI→ ComponentWrapper() — ui Function Reference

Dependency Diagram

graph TD
  d8ac284f_5e18_690f_d5ec_0093a6a2e107["ComponentWrapper()"]
  dc3130d7_85e4_d3f9_f827_dc97c3125a68["component-wrapper.tsx"]
  d8ac284f_5e18_690f_d5ec_0093a6a2e107 -->|defined in| dc3130d7_85e4_d3f9_f827_dc97c3125a68
  019a4511_ab46_5cc5_b4f3_af1958d6be42["getComponentName()"]
  d8ac284f_5e18_690f_d5ec_0093a6a2e107 -->|calls| 019a4511_ab46_5cc5_b4f3_af1958d6be42
  style d8ac284f_5e18_690f_d5ec_0093a6a2e107 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/component-wrapper.tsx lines 7–31

export function ComponentWrapper({
  className,
  name,
  children,
  ...props
}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
  return (
    <ComponentErrorBoundary name={name}>
      <div
        id={name}
        data-name={name.toLowerCase()}
        className={cn(
          "flex w-full scroll-mt-16 flex-col rounded-lg border",
          className
        )}
        {...props}
      >
        <div className="border-b px-4 py-3">
          <div className="text-sm font-medium">{getComponentName(name)}</div>
        </div>
        <div className="flex flex-1 items-center gap-2 p-4">{children}</div>
      </div>
    </ComponentErrorBoundary>
  )
}