ComponentWrapper() — ui Function Reference

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

Function tsx Internationalization RTLLayout calls 1

Entity Profile

Internationalization→ RTLLayout→ ComponentWrapper() — ui Function Reference

Dependency Diagram

graph TD
  5d1ac5a0_d10a_ba7a_dddd_0df9b1fd2a61["ComponentWrapper()"]
  e45a2200_2ccc_c5a6_144d_516890bb99cb["component-wrapper.tsx"]
  5d1ac5a0_d10a_ba7a_dddd_0df9b1fd2a61 -->|defined in| e45a2200_2ccc_c5a6_144d_516890bb99cb
  d5ba1458_37b8_bb11_97cf_129cbf5ad372["getComponentName()"]
  5d1ac5a0_d10a_ba7a_dddd_0df9b1fd2a61 -->|calls| d5ba1458_37b8_bb11_97cf_129cbf5ad372
  style 5d1ac5a0_d10a_ba7a_dddd_0df9b1fd2a61 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/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>
  )
}